Как изменить цвет кнопки на сайте

Изменение цвета кнопки - один из способов улучшить визуальное оформление веб-страницы. Рассмотрим методы изменения цвета кнопок с помощью CSS для различных ситуаций.

Содержание

Основные способы изменения цвета кнопки
Изменение цвета стандартной HTML-кнопки
- Базовый CSS код
Цветовые состояния кнопки
Способы задания цвета
- Пример изменения цвета кнопки при наведении
Изменение цвета кнопки в Bootstrap
Анимация изменения цвета
- Важные рекомендации

Основные способы изменения цвета кнопки

Изменение фонового цвета
Настройка цвета текста
Изменение цвета границы
Цветовые состояния (hover, active, focus)

Изменение цвета стандартной HTML-кнопки

Базовый CSS код

button { background-color: #4CAF50; /* Зеленый цвет */ color: white; border: none; padding: 10px 20px;
}

Цветовые состояния кнопки

Состояние	CSS псевдокласс	Пример
При наведении	:hover	button:hover { background-color: #45a049; }
При нажатии	:active	button:active { background-color: #3e8e41; }
В фокусе	:focus	button:focus { outline: 2px solid #4CAF50; }

Способы задания цвета

Шестнадцатеричный код (HEX): #FF5733
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 0.8)
Название цвета: red, blue, green
HSL: hsl(12, 100%, 60%)

Пример изменения цвета кнопки при наведении

.btn-primary { background-color: #007bff; color: white; transition: background-color 0.3s;
}
.btn-primary:hover { background-color: #0056b3;
}

Изменение цвета кнопки в Bootstrap

Класс	Цвет	Как изменить
btn-primary	Синий	Переопределить переменную $primary
btn-success	Зеленый	Переопределить $success
btn-danger	Красный	Переопределить $danger

Анимация изменения цвета

.gradient-btn { background: linear-gradient(to right, #ff8a00, #da1b60); transition: all 0.4s;
}
.gradient-btn:hover { background: linear-gradient(to right, #da1b60, #ff8a00);
}