"css3 - animation button hover"
Bootstrap 3.0.0 Snippet by shuvossd

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="wrapper"> <img src="http://images.clipartpanda.com/clouds-background-png-CloudImage.png"> <div class="circle">Hover Me</div> </div>
body{ background: lightblue; text-align: center; } .wrapper{ width: 1005; padding: 20px; box-sizing:border; } img { /* note: there are 2 value in parameter 1st is X and 2nd is Y; transform: translate(-200px , 200px); transform: scale(3,0.5); transform: rotateX(90deg); transform: rotateY(90deg); transform: rotate(90deg); transform: rotateZ(-90deg) translateY(200px) scale(2); */ } .circle{ width: 100px; padding: 50px 0px; line-height: 0; margin: 60px auto; background: pink; color: white; border-radius: 50px; cursor: pointer; /*transition: 1s;*/ transition: background 1s,transform 1s 1s ease-in; /*separate transition effect in one property*/ } .circle:hover{ background: salmon; transform: rotate(360deg); }

Related: See More


Questions / Comments: