Use CSS3 to create a rotate changeable button

This article mainly describes the use of CSS3 to create a rotation can change the color button, has a certain reference value, now share to everyone, the need for friends can refer to

Want to lead a visitor to another page? It's a good idea to add a nice button! Today's article presents how to use CSS3 to create a rotation, rotation, and discoloration button that needs to be understood by a friend

Want to lead a visitor to another page? It's a good idea to add a nice button! Today's article presents how to use CSS3 to create a rotation, rotation, and discoloration button.
This is a CSS3 button that shows the rotation. Let's start with the HTML:

<p> <a class= "button" > Rotate button </a> </p>

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

Here's the key Code transformation property, 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; }

The conversion element rotates 360 degrees to a button, a complete circle. The rest of the code changes color and font size.
Have fun with this one. Maybe you can make it useful for some fun holiday buttons. Maybe you can even upgrade it to rotate a button and change the image from one to another. Who knows? The possibilities are endless.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!