"Button Animation CSS3 "
Bootstrap 4.0.0 Snippet by dilipkevat1991

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 mt-60"> <div class="row"> <div class="col-lg-12"> <a class="btn btn-primary btn-lg btn-animation" href="#" role="button">Learn more</a> </div> </div> </div>
/*btn-animation*/ /* animated images */ @-webkit-keyframes Floatingy{ from {-webkit-transform:translate(0, 0px);} 65% {-webkit-transform:translate(50px, 0);} to {-webkit-transform: translate(0, -0px);} } @-moz-keyframes Floatingy{ from {-moz-transform:translate(0, 0px);} 65% {-moz-transform:translate(50px, 0);} to {-moz-transform: translate(0, -0px);} } @-webkit-keyframes Floatingx{ from {-webkit-transform:translate(50px, 0px);} 65% {-webkit-transform:translate(0, 0);} to {-webkit-transform: translate(50px, -0px);} } @-moz-keyframes Floatingx{ from {-moz-transform:translate(50px, 0px);} 65% {-moz-transform:translate(0, 0);} to {-moz-transform: translate(50px, -0px);} } .btn-animation { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: Floatingy; -moz-animation-name: Floatingy; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; border-radius:30px; box-shadow:0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2) } .btn-animation:hover { box-shadow:0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2) } .mt-60 { margin-top:60px; }

Related: See More


Questions / Comments: