Как добавить рамку вокруг кнопки?
Кнопки создаются с помощью элементов или , при этом вид кнопки меняется от браузера к браузеру. Если задать цвет фона у кнопки через свойство 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. Вид кнопки в браузере
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как убрать обводку у кнопки css
Чтобы у элемента button убрать обводку, достаточно выставить свойство border в none. Чтобы исключить появление обводки у кнопки при нажатии, или при переходе на неё с помощью табуляции с клавиатуры необходимо использовать псевдо-классы:
button, button:active, button:focus border:none; > Как сделать — Контур кнопок
Узнать, как стилизовать кнопки контура с помощью CSS.
Контур кнопок
Успех Информация Предупреждение Опасность По умолчанию
Успех Информация Предупреждение Опасность По умолчанию
Создать контур кнопок
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.btn <
border: 2px solid black;
background-color: white;
color: black;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
>
/* Зеленый */
.success <
border-color: #4CAF50;
color: green;
>
.success:hover <
background-color: #4CAF50;
color: white;
>
/* Синий */
.info <
border-color: #2196F3;
color: dodgerblue
>
.info:hover <
background: #2196F3;
color: white;
>
/* Оранжевый */
.warning <
border-color: #ff9800;
color: orange;
>
.warning:hover <
background: #ff9800;
color: white;
>
/* Красный */
.danger <
border-color: #f44336;
color: red
>
.danger:hover <
background: #f44336;
color: white;
>
/* Серый */
.default <
border-color: #e7e7e7;
color: black;
>
.default:hover <
background: #e7e7e7;
>
Добавить свойство border-radius для создания кнопок округлого контура:
Пример
.btn <
border-radius: 5px;
>
Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.