Examples of mouse-over button effects based on CSS3 animation

Brief Tutorials

This is a set of mouse-over button animation effects made using CSS3 animation. This set of mouse over button animation has a total of 13 final effect, all by the button's pseudo-elements and CSS3 animation to make the completion.

View Demo Download Plugin

How to use

HTML structure

The effect uses hyperlinks to make buttons, such as the first swipe effect's HTML code:

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

CSS Styles

For convenience, animation transitions are added to all elements except <i>, <em>, <b>, <strong>, and <span> in the effect.

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, a dark purple slider is made from the button's: before pseudo-element. The slider is absolutely positioned on the left-hand side of the button and starts with a width of 0.

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

When the mouse is 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 taps the button, the background color of the button is changed to a lighter purple.

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