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

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

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

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

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

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

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18275
Поява елементів при скролі
Переглядів: 16835
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6944
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6785
Як зробити ефект натискання кнопки на CSS
Переглядів: 6206
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab