Use CSS3 to create a spin-color button

First from HTML:

< Div>
< a class= button > Rotate button </a>
</div>

and now 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 */
}
Here's the key code conversion properties, which can be defined by width, height, background, color, transparency, and so on. In this example, the attribute is changed every second, according to the transition time attribute.

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

Next, use this code to trigger the spinning effect by circling the 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;
}

Convert the symbol to rotate a 360-degree button, a complete circle. The rest of the code changes the color and font size.