Make rotating buttons with CSS3 transition and transform

CSS3 has lots of new properties which can be used to make much more complex ui elements on webpages.

Here is the rotating button Demo :

Tested in latest versions of Firefox , Google Chrome , Opera.

The above shown rotation effect is achieved using the transition and transform properties of CSS3.

Code

The html code is minimal :

<div>
<a class="button">Rotation</a>
</div>

CSS :

.button
{

background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
margin:50px;
cursor:pointer;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;
border-radius:5px;

box-shadow:0 0 2px rgba(0,0,0,0.5);

text-shadow:0 0 5px rgba(255,255,255,0.5);

display:inline-block;	/* It is important for the button to rotate*/
}

First comes the transition definition. The transition property is used to define the the transition property , duration , timing function and delay. The documentation is here http://www.w3.org/TR/css3-transitions/.

Those properties which are mentioned in transition shall have a timing effect when they change , like in hover.

Transition supports a long syntax like this :

transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;

The above indicates that width should be changed over a period of 1 second , height should be changed over a period of 1 second and same for others.

Short syntax like this :

transition: opacity 2s ease-out , background 1s linear ,  width 1s , height 1s , font-size 1s;

The above indicates that opacity should be changed over a period of 2 seconds using the function ease-out , background should be changed over a period of 1 second using the linear function and so on.

Next comes the hover action

.button:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);

background:#99A411;
font-size:30px;
color:#fff;
}

The transform property applies a certain transform function to an element like rotate , translate , skew.
So to rotate something once will need a rotate(360deg). Transform is documented here : http://www.w3.org/TR/css3-2d-transforms/

The button not only rotates but also changes its background color , font size and color.

Quite simple!!

Popularity: 18% [?]