<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <a href="#"><span data-hover="Go To Website">Go To Website</span></a> </div> </div>

a { color:#5dcf80; font-family: 'Homenaje', sans-serif; font-weight:400; text-transform:uppercase; font-size:1.28em; line-height:40px; box-shadow:0px 0px 3px rgba(0,0,0,0.3); text-decoration:none; -webkit-perspective:1000px; -moz-perspective:1000px; perspective:1000px; } a span { position:relative; display:inline-block; padding:0px 28px; height:40px; background-color:#41aa61; color:#fff; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; } a span::before { position:absolute; top:100%; left:0; width:100%; height:100%; text-align:center; color:#fff; background-color:#2e8b4b; content:attr(data-hover); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; transform:rotateX(-90deg); transform-origin:50% 0; } a:hover span { transform:rotateX(90deg) translateY(-20px); }