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

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 переглядача.

button:hover {
  background: #3071A9
}

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

button:hover {
  background: #CF4647;
}

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