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 thetag pair in the button to contain the button text

 鼠标悬停 

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:

• Use the

  :afterselector 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%; }

  Copy after login

In the final effect, what flashes past is a tilted rectangle; so we add a
• transform: rotate(-45deg);

  Style

  button:after { transform: rotate(-45deg); }

  Copy after login

Use the top attribute and left attribute to control the position of the rectangle

• button:after { top: -2px; left: -1px; }

  Copy after login

Because it is a hover effect, it must be used
• :hover

  Selector; we want to set the position of the rectangle when the mouse is hovering
  

  button:hover:after { left: 120%; }

  Copy after login

Such a sudden change in position is not the effect we want. You can use the
• transition

  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); }

  Copy after login

Roughly achieved, let’s polish it up a bit.
If you only want the rectangular overlay to be displayed within the button range, you can add an

style

button { overflow: hidden; }

##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:

     
  
 鼠标悬停 
  

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!