Як змінити колір кнопки: повна інструкція для новачків

Змінюємо колір фону та тексту у кнопки при наведенні.

Будемо використовувати два способи. Перший – просто змінюємо фон та колір у кнопки. Другий – змінюємо фон кнопки за допомогою псевдоелемента: before

Кнопка усередині форми (button type=”submit”)

Просто змінюємо фон та колір:

See the Pen #1 Просто меняем фон и цвет кнопки — button type=”submit” by Pelegrin (@pelegrin2puk) on CodePen.

Змінюємо через псевдоелемент :before (зверніть увагу на span, який потрібно розмістити всередині кнопки):

See the Pen Меняем фон с помощью :before — button type=”submit” by Pelegrin (@pelegrin2puk) on CodePen.

Кнопка усередині форми (input type=”submit”):

Той самий принцип, що й вище, але замість button[type=”submit”] потрібно в CSS прописати input[type=”submit”]

Кнопка, як окремий елемент у html коді:

Просто змінюємо фон та колір:

See the Pen Изменить цвет кнопки — обычный div by Pelegrin (@pelegrin2puk) on CodePen.

А тепер міняємо колір, за допомогою псевдоелементу :before

See the Pen Изменить цвет кнопки с помощью :before — обычный div by Pelegrin (@pelegrin2puk) on CodePen.

Кнопка в Bootstrap

Щоб змінити колір кнопки в Bootstrap, необхідно знайти потрібний клас (або id), а також потрібний порядок вкладеності елементів.

Наприклад, у вас є кнопка

<button type="button" class="btn btn-outline-primary">Primary</button>

І ви хочете змінити для неї колір при наведенні. Тоді я би рекомендував у css прописати наступне:

.btn.btn-outline-primary:hover {
  background: red; /* Або будь-який інший колір */
  /* А також замінив би колір для border */
}

Як змінити колір кнопки за допомогою JS

Я покажу два варіанти, як змінити колір кнопки під час наведення використовуючи JavaScript.

Перший варіант – ми будемо додавати клас з нашої кнопки через JS:

See the Pen YzWmEGX by Pelegrin (@pelegrin2puk) on CodePen.

Другий варіант – ми будемо змінювати css стилі прямо у JS:

See the Pen #2 Меняем цвет кнопки c помощью JS — меняем стили внутри JavaScript by Pelegrin (@pelegrin2puk) on CodePen.

Сподіваюся, я допоміг вам розібратися, як змінити колір кнопки при наведенні на неї курсором. На закінчення рекомендую подивитися відео, щоб остаточно розвіяти всі питання.