How to create Flat Rotating Icon Buttons with CSS3 and jQuery

It is very simple to create buttons with rotating icons on mouse-over or on click. Download white colored icons from http://flaticon.sodhanalibrary.com/

Rotate Icons On Mouse Over

1. Define "rotate" class style with rotation of 0 degrees.
2. Define "hover of rotate class" style with rotation of 360 degrees.

.rotate {
-webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
background-color:#4284c1;
width:70px;
border-radius:70px;
height:55px;
padding-top:15px;
text-align:center;
cursor:pointer;
margin:10px;
float:left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.rotate:hover {
-webkit-transform: rotate(-360deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.rotate img {
width:32px;
height:32px;
}

Define HTML like below

<div class="rotate">
<img src="/img/rotate1.png" />
</div>

DEMO

Rotate Icons On Click

1. Define "rotate" class with background-color ,width, height..etc

2. Define "rotate1" class with 0 degrees rotation..etc

3. Define "rotate2" class with 360 degrees rotation..etc

.rotate {
background-color:#4284c1;
width:70px;
border-radius:70px;
height:55px;
padding-top:15px;
text-align:center;
cursor:pointer;
margin:10px;
float:left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rotate1 {
-webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.rotate2 {
-webkit-transform: rotate(-360deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

Define JavaScript

$(window).load(function(){
  $(".rotate1, .rotate2").click(function(){
    $(this).toggleClass("rotate1 rotate2");
  });
});

Define HTML

<div class="rotate rotate2">
  <img src="/img/rotate1.png"/>
</div>

DEMO

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary