Как изменить цвет кнопки: полная инструкция для новичков

Поменяем цвет фона и текста у кнопки при наведении.

Будем использовать два способа. Первый — просто меняем фон и цвет у кнопки. Второй — меняем фон кнопки с помощью псевдоэлемента :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.

Надеюсь, я помог вам разобраться, как можно изменить цвет кнопки при наведении на нее курсором. В заключении рекомендую посмотреть видео, чтобы окончательно развеять все вопросы.