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

Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button, как показано в примере 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, а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рисунке ниже продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.

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

Просмотров:

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