Animated button

animation button using css

by padma rubhan

HTML

<div class="btn btn-buy img-center" id="spin">Buy Now</div>

CSS

.btn-buy{
      margin:30%;
    background-color: #5ec8c8;
        border-radius: 5px;
        padding:0px 5px 2px 5px;
        margin-bottom: 30px;
        color: #2b3946;
        width: 110px;
	animation: hovering 2s infinite;
	animation-timing-function: ease-in-out;
        }

#spin:hover {
    
    animation-play-state:paused;
}

    @-webkit-keyframes spinnerRotate
{
    25%{-webkit-transform:rotate(10deg);}
    50%{-webkit-transform:rotate(0deg);}
    75%{-webkit-transform:rotate(-10deg);}
    100%{-webkit-transform:rotate(0deg);}

}
@-moz-keyframes spinnerRotate
{
    25%{-moz-transform:rotate(10deg);}
    50%{-moz-transform:rotate(0deg);}
    75%{-ms-transform:rotate(-10deg);}
    100%{-ms-transform:rotate(0deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(10deg);}
    to{-ms-transform:rotate(0deg);}
    from{-ms-transform:rotate(-10deg);}
    to{-ms-transform:rotate(0deg);}
}
#spin{
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}