Detailed example of mouse over button special effects based on CSS3 animation

　Brief Tutorial

This is a set of mouse-over button animation special effects made using CSS3 animation. This set of mouse-over button animations has 13 final effects, all of which are created by pseudo-elements of buttons and CSS3 animation.

##View Demo Download plug-in

How to use

HTML structure

This effect uses hyperlinks to create buttons. For example, the HTML code of the first Swipe effect is ：

<a class="btn-0" href="#">Swipe</a>

CSS style

## For convenience, the special effects are except , All elements except , , , and have animated transitions added.

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}

Then set a common style for the button.

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

In the first DEMO, use the :before pseudo-element of the button to create a dark purple slider. The slider is absolutely positioned and is located to the left of the button. Its width is 0 at the beginning.

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}

When the mouse slides over the button, the font color of the button transitions to white: The width of the before pseudo-element changes from 0 to 100%.

.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}

When the user clicks the button, change the background color of the button to a lighter purple.

.btn-0:active {
  background: #881474;
}

The above is the detailed content of Detailed example of mouse over button special effects based on CSS3 animation. For more information, please follow other related articles on the PHP Chinese website!