How To Create Rotating Buttons Using CSS3

Posted: February 8, 2012 in HTML 5

Are you looking for a way to put a little spice in your buttons? Are you tired of the same old boring buttons that do nothing but take your visitors to another page? Are you looking to add some changing color to your buttons? Are you feeling the need to experiment with CSS3? Well then, have I got some code for you! Today’s article presents how to create a spinning, rotating, color-changing button using nothing but CSS3.

The original author of this code goes by Binary Tides. Here is a demo of the rotating CSS3 button. Let’s start with the HTML:

<div>
<a>Rotation</a>
</div>

And now for the 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*/
}

The key code here is the transition property, which can be defined through width, height, background, color, opacity and so on. In this example, the properties are changed every second, per the transition-duration property. You could also do this if you are looking to save on typing:

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

Next, use this snippet of code to trigger the spinning effect through the hover element;

.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 element rotates the button 360 degrees, a full circle. The rest of the code changes the colors and the font size.

Have fun with this one. Perhaps you can make it useful for some fun Holiday buttons. Maybe you can even upgrade it to spin a button that changes from one image to another. Who knows? The possibilities are endless!

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 :

Please upgrade your browser

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 :

1 <div>
2 <a class="button">Rotation</a>
3 </div>

CSS :

1 .button
2 {
3
4 background:#aaa;
5 color:#555;
6 font-weight:bold;
7 font-size:15px;
8 padding:10px 15px;
9 border:none;
10 margin:50px;
11 cursor:pointer;
12
13 -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
14
15 -o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
16 -o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
17
18 -moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
19 -moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
20
21 transition-property:width,height,transform,background,font-size,opacity;
22 transition-duration:1s,1s,1s,1s,1s,1s;
23
24 -webkit-border-radius:5px;
25 border-radius:5px;
26
27 box-shadow:0 0 2px rgba(0,0,0,0.5);
28
29 text-shadow:0 0 5px rgba(255,255,255,0.5);
30
31 display:inline-block;   /* It is important for the button to rotate*/
32 }

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 :

1 transition-property:width,height,transform,background,font-size,opacity;
2 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 :

1 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

1 .button:hover
2 {
3 -moz-transform: rotate(360deg);
4 -webkit-transform: rotate(360deg);
5 -o-transform: rotate(360deg);
6 transform: rotate(360deg);
7
8 background:#99A411;
9 font-size:30px;
10 color:#fff;
11 }

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s