Home > Article > Web Front-end > Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing
In the previous article "How to create a waterfall flow layout with pure CSS3? In "A Brief Analysis of Columns Method", we introduced the method of using CSS3 column series properties to create a waterfall flow layout. Interested friends can learn about it~
And today we will take a look at how to use CSS3 to create a waterfall flow layout. Add dynamic effects to buttons to achieve a button hover shiny shadow animation effect, making the web page more interactive and attractive!
Let’s take a look at the renderings first
Let’s study how to achieve this effect:
First of all It is the HTML part, define a div container to wrap the button button, use the tag pair in the button to contain the button text
<div id="shiny-shadow"> <button><span>鼠标悬停</span></button> </div>
and then start Define css styles for modification: adjust layout style, color range
#shiny-shadow {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #1c2541;
}
button {
border: 2px solid white;
background: transparent;
text-transform: uppercase;
color: white;
padding: 15px 50px;
outline: none;
}
span {
z-index: 20;
}##Then create a flashing overlay:
:after selector to create a rectangle with transparency and position it absolutely relative to the button button
button {
position: relative;
}
button:after {
content: '';
display: block;
position: absolute;
background: white;
width: 50px;
height: 125px;
opacity: 20%;
} Style
button:after {
transform: rotate(-45deg);
}
button:after {
top: -2px;
left: -1px;
}
Selector; we want to set the position of the rectangle when the mouse is hovering
button:hover:after {
left: 120%;
}
attribute to add a transition effect, because this attribute is a new attribute of CSS3, and a prefix needs to be added to be compatible with other browsers
button:hover:after {
left: 120%;
transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}style<pre class="brush:php;toolbar:false">button {
overflow: hidden;
}</pre># to the button label.
##It can be seen that there is still a problem with the position of the overlay. In the final effect, the overlay is not displayed at the beginning. We use the top attribute and the left attribute to adjust it. 
button:after {
top: -36px;
left: -100px;
}
OK, you’re done! The complete code is attached below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#shiny-shadow {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #1c2541;
}
button {
border: 2px solid white;
background: transparent;
text-transform: uppercase;
color: white;
padding: 15px 50px;
outline: none;
position: relative;
overflow: hidden;
}
span {
z-index: 20;
}
button:after {
content: '';
display: block;
position: absolute;
background: white;
width: 50px;
height: 125px;
opacity: 20%;
transform: rotate(-45deg);
top: -36px;
left: -100px;
}
button:hover:after {
left: 120%;
transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}
</style>
</head>
<body>
<div id="shiny-shadow">
<button><span>鼠标悬停</span></button>
</div>
</body>
</html>The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "css Video Tutorial
"!The above is the detailed content of Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing. For more information, please follow other related articles on the PHP Chinese website!