Create a rotating color-changing button using CSS3

This article mainly introduces the use of CSS3 to create a rotating color-changing button. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

I want to lead visitors to another Page? Adding a cool button is a good way! Today’s article proposes how to use CSS3 to create a rotating, rotating, and color-changing button. Friends who need to know more can refer to the following

Want to lead visitors to Another page? Adding a cool button is a great way to do it! Today’s article proposes how to use CSS3 to create a rotating, rotating, and color-changing button.
This is a CSS3 button that demonstrates rotation. Let's start with HTML:

<p> 
<a class="button">旋转按钮</a> 
</p>

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; /*它是重要为按钮旋转*/ 
}

Here are the key code conversion properties, which can be defined by width, height, background, color, Transparency etc. In this example, the property is changing every second, according to the transition time property.
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 hovering 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 the button 360 degrees, a complete circle. The rest of the code changes the color and font size.
Have fun with this one. Maybe you could make it useful with some fun holiday buttons. Maybe you could 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 entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS to achieve the effect of text surrounding images

How to use css3 to implement a circular progress bar

Use CSS3 to write grayscale filters to create black and white photo effects

The above is the detailed content of Create a rotating color-changing button using CSS3. For more information, please follow other related articles on the PHP Chinese website!