How To Create Rotating Buttons Using CSS3

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 class=”button”>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!