Анимация при наведении на кнопки

kasim

Регистрация
31.01.16
Сообщения
28
Симпатии
11
#1
В шаблон EXTRA.CSS добавляем:

Эффект первый (черная полоса).
Код:
.button {
background: rgb(255, 255, 200) linear-gradient(135deg, #a5cae4 0%, #a5cae4 40%, #000 50%, #a5cae4 60%, #a5cae4 100%) no-repeat scroll 0 center / 300% auto;
}
.button:hover {
animation: 1s ease 0s normal none 1 running light;
}
@keyframes light {
0% {
    background-position: -600px center;
}
100% {
    background-position: 0 center;
}
}
Эффект второй (увеличение и трансформация).

Код:
.button:hover {
animation: 1s ease 0s normal none 1 running bounce;
}
@keyframes bounce {
0% {
    border-radius: 15px;
}
20% {
    border-radius: 30px;
}
60% {
    border-radius: 0;
    transform: scale(1.1);
}
90% {
    transform: scale(0.98);
}
100% {
    border-radius: 15px;
}
}
Эффект третий (слайдер).
Код:
.button {
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #ffffc8 50%, #a5cae4 50%) repeat scroll left bottom / 200% 100%;
    transition: all 1s ease 0s;
}
.button:hover {
    background-position: right bottom;
}