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

🗓️ Оновлено: 08.08.2022
💬Коментарів: 0
👁️Переглядів: 20041

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

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

Будемо використовувати два способи. Перший – просто змінюємо фон та колір у кнопки. Другий – змінюємо фон кнопки за допомогою псевдоелемента: 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.

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

Стаття була корисною?
👍
Так - 14
👎
Ні - 12
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращі біржі посилань
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Колір 2024 року
Дослідницький інститут Pantone обрав головний колір 2024 року. Ним став ніжний бархатистий персиковий відтінок, який отримав назву Peach Fuzz (Персиковий пух).
#febe98