<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#"> <span data-text="P">P</span> <span data-text="R">R</span> <span data-text="A">A</span> <span data-text="K">K</span> <span data-text="A">A</span> <span data-text="S">S</span> <span data-text="H">H</span> </a>

body { margin:0; padding:0; background:#496464; } a { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:250px; height:60px; padding:0 1rem; line-height:60px; text-align:center; border:2px solid #fff; font-size:30px; text-decoration:none; text-transform:uppercase; font-family:sans-serif; color:#fff; overflow:hidden; } a span { display:inline-block; transition:0.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); color:#ff0; } 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); color:#ff0; }