Как добавить рамку вокруг кнопки?
Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере 1 показано создание кнопки, у которой задан цвет фона и рамка.
Пример 1. Цветная кнопка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Кнопка Вид ссылок показан на рис. 1.
Рис. 1. Вид кнопки в браузере
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как добавить рамку вокруг кнопки?
Кнопки создаются с помощью элементов или , при этом вид кнопки меняется от браузера к браузеру. Если задать цвет фона у кнопки через свойство background-color (или background), то к кнопке автоматически добавляется трёхмерная рамка. Чтобы получить одинаковый вид в разных браузерах, для селектора button следует убрать рамку через свойство border со значением none или, наоборот, добавить свою рамку через то же свойство.
В примере 1 показана исходная кнопка, кнопка с цветным фоном, кнопка без рамки, кнопка с фоном и рамкой.
Пример 1. Цветная кнопка
Вид кнопок показан на рис. 1.
Рис. 1. Вид кнопок в браузере
См. также
- background-color
- border
- Атрибут bgcolor
- Блочные элементы
- Добавление треугольника
- Колесо для сокращённых свойств
- Открываем блочную модель
- Оформление ссылок
- Повёрнутые рамки
- Рамка вокруг изображений
- Свойство border
- Строчные элементы
- Фон в CSS
Свойство border: границы для блоков
Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве CSS как border , с помощью которого можно задать границы для элемента. В этот раз мы более детально рассмотрим это свойство на примерах.
Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.
Border-width: ширина границы
С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:
/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая — 4px: */ border-width: 2px 4px; /* верхняя граница — 2px, левая и правая — 6px, нижняя — 3px: */ border-width: 2px 6px 3px; /* верхняя граница — 2px, правая — 3px, нижняя — 4px, левая — 5px: */ border-width: 2px 3px 4px 5px;
Кроме этого, существуют ключевые слова для обозначения ширины границы:
- thin — граница шириной 2px;
- medium — граница шириной 4px;
- thick — граница шириной 6px.
Border-color: цвет границы
Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.
border-color: #FFFF00;
Также можно задать прозрачный цвет, записав:
border-color: transparent;
Border-style: стиль границы
Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:
- solid — сплошная граница;
- dotted — граница из точек;
- dashed — пунктирная граница;
- double — двойная граница;
- groove — объемная граница-выемка;
- ridge — объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
- outset — выдавленная граница;
- inset — вдавленная граница (по сути, инверсия предыдущего стиля).
Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль — например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую — двойными. Здесь уже все зависит лишь от фантазии.
border-style: double dotted;
Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.
Общее CSS-свойство border: 3 в 1
Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:
border: 2px dotted #FF0000;
Границы для отдельных сторон
При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:
- border-top — стиль для верхней границы;
- border-right — для правой границы;
- border-bottom — для нижней границы;
- border-left — для левой границы.
border-top: 2px solid #0000FF; border-bottom: 7px double #000080;
Итоги
Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.
Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:
Но это слишком длинная запись. Всё это можно записать короче:
Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.
Мини-задание
Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:
- Верхнюю и нижнюю границы сделайте сплошными solid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
- Левую границу сделайте пунктирной dashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
- Правую границу сделайте двойной double , шириной 7 пикселей, цвет отличный от двух предыдущих.
В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):
Результат задания (вид в Chrome)
Рамка с отступом граница кнопки
Есть CSS и HTML. Нужно, чтобы при фокусе на кнопку появлялась рамка с отступом от кнопки. Также, нужно удалить эту рамку, если пользователь активировал ее или навел на нее. Валидатор жалуется на данный код. Пробовал box-shadow: 0 0 0 2px transparent, 0 0 0 4px myColor , но это не то. Тем более фон — это изображение, а не сплошной цвет. Пробовал еще свойство outline , но дело в том, что в ТЗ нужна плавная анимация, а outline только появляется плавно, а исчезает резко. Помогите!
Отслеживать
задан 10 авг в 4:03
1 1 1 бронзовый знак
Простите, а что мешает написать .intro__button-container>intro__button:hover и прочее? В конце концов :has не везде поддерживается.
10 авг в 4:50
Дело в том, что нужно установить рамку именно intro__button-container , а не intro__button .
10 авг в 7:19
Тогда, увы. Ваш код вполне работает. Причём не надо кусков про hover и active, оно и без них работает. Если оставить только кусок про focus — может код станет валидным?
11 авг в 10:09
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Боюсь, средствами только CSS ничего не получится. Но при задействии Javascript — всё становится просто. Впрочем, если у вас таких блоков с кнопками будет много, моё решение не подойдёт. Я заменил классы на id, так код получается проще.
Обратным по отношению к focus (по крайней мере для кнопки) является blur — потеря фокуса, а не active или hover. Добавил в CSS цвет, заданный через переменную и родителю для наглядности добавил высоту и фон. У вас, очевидно. будут другие свойства.
const parent = document.getElementById('intro__button-container') const button = document.getElementById('intro__button') button.addEventListener('focus', () => < parent.classList.add('focus') >); button.addEventListener('blur', () => < parent.classList.remove('focus') >);:root < --color-4: orange; >#intro__button-container < height: 100px; background-color: #999; >.focus
При потере кнопкой фокуса — работает при нажатии кнопки Tab, например, класс focus с родителя кнопки снимается.