CSS Button-Slip Effect

HTML CODE:

<a href="#">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
  </a>

---

CSS CODE:

body{
  margin:0;
  padding:0;
  background:#262626;
}
a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:60px;
  line-height:60px;
  text-align:center;
  border:2px solid white;
  font-size:30px;
  text-decoration:none;
  font-family:sans-serif;
  color:#fff;
  border-radius:20px;
  box-shadow:0px 0px 200px rgba(255,255,255,.5);
  overflow:hidden;
}
a span{
  display:inline-block;
  transition:.5s
}
a span:nth-child(odd):before{
  content: attr(data-text);
  position:absolute;
  transform:translateY(100%)
}
a span:nth-child(odd){
  transform:translateY(-100%);
}
a:hover span:nth-child(odd){
  transform: translateY(0%);
}
a span:nth-child(even):before{
  content: attr(data-text);
  position:absolute;
  transform:translateY(-100%)
}
a span:nth-child(even){
  transform:translateY(100%);
}
a:hover span:nth-child(even){
  transform: translateY(0%);
}