Прості способи поліпшити анімацію при наведенні на кнопку

Реакція на дію - дуже важливий елемент веб-сайту, теми або шаблону.

Кнопки стали одними з значущих компонентів веб-дизайну. Тож чому б не прикрасити їх, додавши прості CSS ефекти.

Налаштовуємо код

Додайте наступний CSS код для вашого елементу button.

    body > button {
        background: #428BCA;
        color: #fff;
        font-family: Sans-serif;
        font-size: 20px;
        height: 60px;
        width: 150px;
        line-height: 60px;
        margin: 25px 25px;
        text-align: center;
        border: 0;
        transition: all 0.3s ease 0s;
    }

Властивості CSS можна налаштувати на свій смак. Ви, ймовірно, вже використовуєте деякі шрифти і налаштування розмірів, зокрема, якщо ви застосовуєте Bootstrap. Майте можливість додавати, змінювати або вилучати все, що завгодно.

Властивість CSS transition повинна бути включена. Вона складається з 4 елементів:

• Властивість: Ім'я або назви CSS властивостей, для яких повинний бути застосований перехід.

• Тривалість: Визначає тривалість переходу.

• Термін: Визначає функцію синхронізації, яка використовуватиметься для переходу.

• Затримка: Визначає проміжок часу між зміною властивостей і початком переходу.

Застосування переходів

Тепер, коли фундамент закладений, давайте розглянемо з 4 конкретних переходи, які можна застосувати для вашої кнопки.

Ви можете переглянути повний код для кожного прикладу з використанням HTML і CSS з допомогою CodePen переглядача.

Затемнення

Щоб затемнити кнопку, просто встановіть колір фону більш темним, коли :hover активується.

    button:hover {
      background: #3071A9
    }

Затухання

Щоб створити ефект затухання, спочатку встановіть opacity 1 за замовчуванням. Коли :hover активується, зменшіть непрозорість до 0,75. Експериментуйте з налаштуванням прозорості.

    button {
      opacity: 1;
    }
     
     button:hover {
      opacity: 0.75;
    }

Зміна кольору

Щоб змінити колір кнопки, виберіть інший колір фону, коли :hover активована.

    button:hover {
      background: #CF4647;
    }

Додати межі

Щоб створити вкладені межі, використовувати такі властивості CSS** **box- shadow. Збільшуйте або зменшуйте розмір box-shadow на свій смак.

button:hover {
  box-shadow: inset 0 0 0 5px #3071A9;
}