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

Тема в разделе "Инструкции и основная информация", создана пользователем kasim, 21.02.16.

  1. kasim

    kasim Участник

    Сообщения:
    28
    Репутация:
    6
    Рейтинг:
    +10 / -0
    В шаблон 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;
    }