<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 ----------> <div class="container"> <div class="row"> <a class="hvr-bounce-to-top" role="button">button</a> </div> </div>

.hvr-bounce-to-top { backface-visibility: hidden; background: #f00 none repeat scroll 0 0; box-shadow: 0 0 1px rgba(0, 0, 0, 0); color: #fff; display: inline-block; font-size: 16px; padding: 9px 0; position: relative; transform: translateZ(0px); transition-duration: 0.5s; transition-property: color; vertical-align: middle; width: 160px; text-align:center; } .hvr-bounce-to-top::before { background: #ccc none repeat scroll 0 0; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(0); transform-origin: 50% 100% 0; transition-duration: 0.5s; transition-property: transform; transition-timing-function: ease-out; z-index: -1; } .hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { color: #fff; } .hvr-bounce-to-top:hover::before, .hvr-bounce-to-top:focus::before, .hvr-bounce-to-top:active::before { transform: scaleY(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }