Using CSS3 to realize the dynamic special effect code of button hovering and flashing

Time:2022-5-4

We introduced the method of using CSS3 column series attributes to create waterfall flow layout. Interested friends can learn about it~

Let’s take a look at the renderings first

Now let’s study how to achieve this effect:

The first is the HTML part, which defines a div container to wrap the button button, and uses label pairs to contain the button text in the button

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

Then start to define CSS style for decoration: adjust layout style and 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 make a flashing covering:

Use the: after selector to make a rectangle with transparency and make it absolutely positioned relative to the button button


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

In the final effect, what flashed by was an inclined 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 animation effect of button hovering and flashing is realized

Because it is hovering effect, you need to use: hover selector; We want 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 of 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 realized. Let’s decorate it.

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


button {
  overflow: hidden;
}

It can be seen that there are still some problems with the position of the overlay. In the final effect, the overlay is not displayed at first. We use the top attribute and the left attribute to adjust it


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

The above is the details of using CSS3 to realize the dynamic effect of button hover and flicker.

This is the end of this article about using CSS3 to realize the dynamic effect of button hover and flicker. For more relevant CSS3 button hover and flicker dynamic content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!