CSS кнопки анимации
HTML
Код
<button class="expand">Expand</button>
<button class="shake">Shake</button>
<br>
<button class="shine">Shine</button>
<button class="bounce">Bounce</button>
CSS
Код
button {
background-color: #e4e4e4;
color:#000;
padding: 20px 10px; /* within the button */
width:300px;
border: 2px solid rgb(233,171,88);
border-radius:5px;
font-size: 18px;
cursor:pointer;
margin:10px 10px;/* between buttons */
}
.shine {
background: -moz-linear-gradient(-45deg, #e4e4e4 0%, #e4e4e4 40%, #e4e4e4 50%, #e4e4e4 60%, #e4e4e4 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e4e4e4), color-stop(40%,#e4e4e4), color-stop(50%,#fff), color-stop(60%,#e4e4e4), color-stop(100%,#e4e4e4));
background: -webkit-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -o-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -ms-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: linear-gradient(135deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#e4e4e4',GradientType=1 );
background-repeat: no-repeat;
background-position:0px;
background-size:300%;
}
.shine:hover {
animation:shine 1s;
-webkit-animation:shine 1s;
}
/* Shine when hover -*/
@keyframes shine {
0% { background-position:-600px; }
100% { background-position:0px; }
}
@-webkit-keyframes shine {
0% { background-position:-600px; }
100% { background-position:0px; }
}
/* Bounce when hover -*/
.bounce:hover {
animation:bounce 1s;
-webkit-animation:bounce 1s;
background-color:rgb(233,171,88);
}
@keyframes bounce {
0% { border-radius:15px; }
20% { border-radius:30px; }
60% { border-radius:0px;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-webkit-transform:scale(1.1); /* Safari and Chrome */}
90% { transform:scale(0.98);
-ms-transform:scale(0.98); /* IE 9 */
-webkit-transform:scale(0.98); /* Safari and Chrome */}
100% { border-radius:15px; }
}
@-webkit-keyframes bounce {
0% { border-radius:15px; }
20% { border-radius:30px; }
60% { border-radius:0px;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-webkit-transform:scale(1.1); /* Safari and Chrome */}
90% { transform:scale(0.98);
-ms-transform:scale(0.98); /* IE 9 */
-webkit-transform:scale(0.98); /* Safari and Chrome */}
100% { border-radius:15px; }
}
/* Expand letter when hover*/
.expand {
white-space:nowrap;
overflow:hidden;
transition: letter-spacing 3s;
-webkit-transition: letter-spacing 3s; /* Safari */
transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.expand:hover {
letter-spacing:15.0px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
background-color:rgb(233,171,88);
}
/* Shake when hover-*/
.shake:hover {
animation-duration: 1s;
animation-name: shake;
background-color:rgb(233,171,88);
}
@keyframes shake {
0% { transform:rotate(0deg); }
29% { transform:rotate(0deg); }
30% { transform:rotate(1deg); }
31% { transform:rotate(2deg); }
33% { transform:rotate(1deg); }
35% { transform:rotate(0deg); }
37% { transform:rotate(-1deg); }
39% { transform:rotate(-2deg); }
41% { transform:rotate(-1deg); }
43% { transform:rotate(0deg); }
45% { transform:rotate(1deg); }
47% { transform:rotate(2deg); }
49% { transform:rotate(1deg); }
51% { transform:rotate(0deg); }
53% { transform:rotate(-1deg); }
55% { transform:rotate(-2deg); }
57% { transform:rotate(-1deg); }
59% { transform:rotate(0deg); }
100%{ transform:rotate(0deg); }
}
Демонстрация