Главная » Вебмастеру » Как добавить рамку вокруг кнопки?
Вторник, Январь 29th, 2019

Как добавить рамку вокруг кнопки?

Кнопки создаются с помощью элементов <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. Вид кнопок в браузере

Источник