Close

2 июля, 2021

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

Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button, как показано в примере 1.

Пример 1. Цветные кнопки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
button {
background: #008EB0; /* Синий цвет фона */
color: #fff; /* Белый цвет текста */
border: none; /* Убираем рамку */
padding: 1rem 1.5rem; /* Поля вокруг текста */
margin-bottom: 1rem; /* Отступ снизу */
}
.green { background: #73A353; }
.red { background: #C1172C; }
.orange { background: #F7941E; }
</style>
</head>
<body>
<button>Синяя кнопка по умолчанию</button>
<button class="green">Зелёная кнопка</button>
<button class="red">Красная кнопка</button>
<button class="orange">Оранжевая кнопка</button>
</body>
</html>

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

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

Рис. 1. Цветные кнопки

Автор: Влад Мержевич
Источник: webref.ru

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?