Як змінити колір кнопки: повна інструкція для новачків
Змінюємо колір фону та тексту у кнопки при наведенні.
Будемо використовувати два способи. Перший – просто змінюємо фон та колір у кнопки. Другий – змінюємо фон кнопки за допомогою псевдоелемента: 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.
Сподіваюся, я допоміг вам розібратися, як змінити колір кнопки при наведенні на неї курсором. На закінчення рекомендую подивитися відео, щоб остаточно розвіяти всі питання.