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

Для изменения цвета фона и текста кнопки используем, соответственно, свойства 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. Цветные кнопки

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 21.09.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты