Кнопки створюються за допомогою елементів <button> або <input>. вид кнопки змінюється від браузера до браузера. Якщо встановити колір фону у кнопки через властивість background-color (або background), то до кнопці автоматично додається тривимірна рамка. Щоб отримати однаковий вигляд у різних браузерах, для селектора button слід забрати рамку через властивість border зі значенням none або, навпаки, додати свою рамку через ту ж властивість.
У прикладі 1 показана вихідна кнопка, кнопка з кольоровим фоном, кнопка без рамки, кнопка з фоном та рамкою.
Приклад 1. Кольорова кнопка
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title> <style> button.bg { background: #f3dbdf; /* Колір тла */
}
button.noborder { border: none; /* Забираємо рамку */
}
button.flat { border: 2px solid #e34761; /* Параметри рамки */
background: #f3dbdf; /* Колір тла */
padding: 0.5em 1em; /* Поля навколо тексту */
}
</style>
</head>
<body> <button>Початкова кнопка</button> <button class="bg">Кнопка з фоном</button> <button class="bg noborder">Кнопка без рамки</button> <button class="flat">Кнопка з рамкою</button>
</body>
</html>Вигляд кнопок показано на мал. 1.
Мал. 1. Вигляд кнопок у браузері