Use CSS3 to implement button hover flash dynamic special effects code

We have introduced how to create a waterfall layout using the CSS3 column series attributes. Interested friends can go and learn about it~

Let’s take a look at the effect diagram first

Let's take a look at how this effect is achieved:

First, in the HTML part, define a div container to wrap the button, and use a tag pair in the button to contain the button text.

<div id="shiny-shadow">
 <button><span>Mouseover</span></button>
</div> 

Then start defining 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;
} 

Next, create a flashing overlay:

Use the :after selector to create a transparent rectangle and position it absolutely relative to the button.

button {
  position: relative;
}
button:after {
    content: '';
    display: block;
    position: absolute;
    background: white;
    width: 50px;
    height: 125px;
    opacity: 20%;
}

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

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

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

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

Finally, the button hover flashing animation effect is realized

Because it is a hover effect, we need to use the :hover selector; we need to set the position of the rectangle when the mouse hovers

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

This sudden change of position is not the effect we want. We can use the transition attribute to add a transition effect. Because this attribute is a new attribute in CSS3, we need to add a prefix 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);
} 

It's roughly achieved, and needs some modification.

If you only want to display a rectangular overlay within the button range, you can add an overflow: hidden; style to the button tag.

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 and left attributes to adjust it.

button:after {
    top: -36px;
    left: -100px;
} 

The above is the details of using CSS3 to achieve button hover flashing dynamic effects.

This is the end of this article about using CSS3 to achieve button hover and flashing dynamic effects. For more related CSS3 button hover and flashing dynamic content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!