Make rotating buttons with CSS3 transition and transform

3 Flares Filament.io 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.

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!!

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 m00n.silv3r@gmail.com. Or find him on Google+

  • http://fineonly.com Vital

    Cross-browser solution for rotating elements – http://code.google.com/p/jqueryrotate/

  • http://johnbmcdonald.com 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 Filament.io 3 Flares ×