CSS style:
. Animate {
Width: 65px;
Height: 40px;
Background: #92b901;
Color: # ffffff;
Position: absolute;
Font-weight: bold;
Font: 12px ' ', verdana, Arial, Helvetica, sans-serif;
Padding: 20px 10px 0px 10px;
Display: blcok;
Margin: 5px;
-WebKit-transition:-WebKit-transform 1 s, opacity 1 s, Background 1 s, width 1 s, height 1 s, font-size 1 s;
-WebKit-border-radius: 5px;
-O-transition-property: width, height,-o-transform, background, font-size, opacity;
-O-transition-Duration: 1 s, 1 s, 1 s, 1 s, 1 s;
-Moz-transition-property: width, height,-o-transform, background, font-size, opacity;
-Moz-transition-Duration: 1 s, 1 s, 1 s, 1 s, 1 s;
Transition-property: width, height, transform, background, font-size, opacity;
Transition-Duration: 1 s, 1 s, 1 s, 1 s, 1 s;
Border-radius: 5px;
Opacity: 0.4;
}
. Animate: hover {
-Moz-transform: Rotate (360deg );
-WebKit-transform: Rotate (360deg );
-O-transform: Rotate (360deg );
Transform: Rotate (360deg );
Opacity: 1;
Background: #1ec7e6;
Width: 90px;
Height: 60px;
Font-size: 16px;
}
HTML:
<A href = "javascript:;" class = "animate"> move the mouse over to mE </a>