Make rotating buttons with CSS3 transition and transform

3 Flares 3 Flares ×

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.


The html code is minimal :

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



padding:10px 15px;

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


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



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

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 :


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

-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);


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 :

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

Quite simple!!

Last Updated On : 5th December 2011

Subscribe to get updates delivered to your inbox

About Silver Moon

Php developer, blogger and Linux enthusiast. He can be reached at Or find him on Google+

  • Vital

    Cross-browser solution for rotating elements –

  • john mcdonald

    That’s a really cool button. When will IE get a clue?

    • Binary Tides

      IE 10 onwards.

3 Flares Twitter 0 Facebook 0 Google+ 3 LinkedIn 0 StumbleUpon 0 3 Flares ×