Use CSS3 to create a rotate changeable button

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.