<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Fancy Animated Buttons</h2>
<div class="col-sm-12">
<button type="submit" class="hvr_bounce_btn">Search</button>
<button class="btn btn-primary btn-outline-primary">DONE</button>
<a class="btn btn-default buttom-custome" href="">Login Now</a>
</div>
</div>
</div>
.hvr_bounce_btn {
margin: 9px 0px 0px;
padding: 6px 25px;
margin-top: 14px;
color: #31a2e1;
background: transparent;
text-decoration: none;
border: 2px solid #31a2e1;
cursor: pointer;
display: inline-block;
-webkit-transform: translateY(0);
transform: translateY(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr_bounce_btn:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #0053af;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr_bounce_btn:hover, .hvr_bounce_btn:focus, .hvr_bounce_btn:active {
text-decoration: none;
color: #FFFFFF;
border: 2px solid #31a2e1;
}
.hvr_bounce_btn:hover:before, .hvr_bounce_btn:focus:before, .hvr_bounce_btn:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.btn{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: background .4s,color .4s,font-size 50ms,width .4s,border .4s;
-o-transition: background .4s,color .4s,font-size 50ms,width .4s,border .4s;
-webkit-transition: background .4s,color .4s,font-size 50ms,width .4s,border .4s;
transition: background .4s,color .4s,font-size 50ms,width .4s,border .4s;
}
.btn-outline-primary{
background: transparent;
color: #2f5c95;
}
.buttom-custome {
background: #0049b7;
border: 1px solid #0049b7;
border-radius: 0px;
color: #ffffff;
-webkit-transition: box-shadow .3s;
transition: box-shadow .3s;
}
.buttom-custome:hover, .buttom-custome:focus {
color: #ffffff;
background-color: #f36d21;
border-color: #e45300;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #f36d21;
}
