Exemple d'une animation au hover d'un bouton
.btn:link, .btn:visited {
position: relative;
display: inline-block;
width: 200px;
margin: 0;
padding: 14px 15px;
color: black;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
border-radius: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.btn:link:after, .btn:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
.btn:link:hover, .btn:visited:hover {
color: #FFF;
}
.btn:link:hover:after, .btn:visited:hover:after {
height: 450%;
}
.btn {
border: 2px solid black;
}
.btn:after {
background: black;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
.btn:hover {
color: white;
}