Для зміни кольору фону та тексту кнопки використовуємо відповідно властивості 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. Кольорові кнопки