Как добавить рамку вокруг кнопки?
Кнопки создаются с помощью элементов или , при этом вид кнопки меняется от браузера к браузеру. Если задать цвет фона у кнопки через свойство background-color (или background), то к кнопке автоматически добавляется трёхмерная рамка. Чтобы получить одинаковый вид в разных браузерах, для селектора button следует убрать рамку через свойство border со значением none или, наоборот, добавить свою рамку через то же свойство.
В примере 1 показана исходная кнопка, кнопка с цветным фоном, кнопка без рамки, кнопка с фоном и рамкой.
Пример 1. Цветная кнопка
Вид кнопок показан на рис. 1.
Рис. 1. Вид кнопок в браузере
См. также
- background-color
- border
- Атрибут bgcolor
- Блочные элементы
- Добавление треугольника
- Колесо для сокращённых свойств
- Открываем блочную модель
- Оформление ссылок
- Повёрнутые рамки
- Рамка вокруг изображений
- Свойство border
- Строчные элементы
- Фон в CSS
Как добавить рамку вокруг кнопки?
Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере 1 показано создание кнопки, у которой задан цвет фона и рамка.
Пример 1. Цветная кнопка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Кнопка Вид ссылок показан на рис. 1.
Рис. 1. Вид кнопки в браузере
Как добавить рамку вокруг кнопки?
Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере 1 показано создание кнопки, у которой задан цвет фона и рамка.
Пример 1. Цветная кнопка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Кнопка Вид ссылок показан на рис. 1.
Рис. 1. Вид кнопки в браузере
Оформление кнопок
Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.
Ширина и высота кнопки
Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).
Пример 1. Размеры кнопки
Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).
Пример 2. Использование padding
Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.
Параметры текста
К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.
Пример 3. Текст на кнопке
Рамка
Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .
Пример 4. Цветные рамки у кнопки
Здесь используется набор кнопок с цветными рамками для различных ситуаций.
Скругление углов
За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .
Пример 5. Скруглённые уголки у кнопок
Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.
| Значение border-radius | Описание | Вид кнопки |
|---|---|---|
| 0.5em | Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. | Кнопка |
| 5em | Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. | Кнопка |
| 50% | Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. | Кнопка |
| 0.8em 0 0.8em 0 | Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. | Кнопка |
Фон
В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .
Пример 6. Использование background-color
Здесь используется набор цветных кнопок для различных ситуаций.
Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.
Пример 7. Сочетание фона и линии
Градиентный фон
Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:
button
Для горизонтального градиента слева направо добавится ещё один параметр to right:
button
Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.
linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.
Пример 8. Градиентные кнопки
Добавление тени
Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.
button
Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .
button
В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.
Пример 9. Кнопки с тенью
Генератор различных теней вы можете увидеть здесь: front-end-tools.com/en/generateboxshadow/
Итоги
- Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
- Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
- Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
- Тень к кнопке добавляется через свойство box-shadow.