Добавить рамку вокруг кнопки - «Линии и рамки» » Новости мира Интернет
Perplexity запустила автономную ИИ-платформу на базе десятка нейросетей - «Новости мира Интернет»
Perplexity запустила автономную ИИ-платформу на базе десятка нейросетей - «Новости мира Интернет»
Google анонсировала новый генератор изображений Nano Banana 2 - «Новости мира Интернет»
Google анонсировала новый генератор изображений Nano Banana 2 - «Новости мира Интернет»
Вышло приложение Nearby Glasses для обнаружения очков с камерой в радиусе 15 метров - «Новости мира Интернет»
Вышло приложение Nearby Glasses для обнаружения очков с камерой в радиусе 15 метров - «Новости мира Интернет»
Обновили алгоритм расчёта ИКС сайта — смотрите результаты в Яндекс Вебмастере — «Блог для вебмастеров»
Обновили алгоритм расчёта ИКС сайта — смотрите результаты в Яндекс Вебмастере — «Блог для вебмастеров»
Google добавила режим Split View в Chrome и аннотации в PDF - «Новости мира Интернет»
Google добавила режим Split View в Chrome и аннотации в PDF - «Новости мира Интернет»
В Paint добавили функцию произвольного вращения области на любой угол - «Новости мира Интернет»
В Paint добавили функцию произвольного вращения области на любой угол - «Новости мира Интернет»
MacBook Pro на M6 получит OLED, сенсорный экран и Dynamic Island - «Новости мира Интернет»
MacBook Pro на M6 получит OLED, сенсорный экран и Dynamic Island - «Новости мира Интернет»
Что нового показали Samsung на Galaxy Unpacked 2026 - «Новости мира Интернет»
Что нового показали Samsung на Galaxy Unpacked 2026 - «Новости мира Интернет»
Самый дешёвый тариф YouTube Premium теперь предлагает фоновый режим и скачивание видео - «Новости сети»
Самый дешёвый тариф YouTube Premium теперь предлагает фоновый режим и скачивание видео - «Новости сети»
Twitch отказался от блокировок «всё или ничего» и разделил наказания - «Новости сети»
Twitch отказался от блокировок «всё или ничего» и разделил наказания - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Линии и рамки » Добавить рамку вокруг кнопки - «Линии и рамки»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить рамку вокруг кнопки формы.

Решение

Кнопки в форме создаются с помощью тега <button> или <input>, к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере.;1 показано создание кнопки, у которой задан цвет фона и рамка.

Пример 1. Цветная кнопка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    border: 2px solid #e34761; /* Параметры рамки */
    background: #f3dbdf; /* Цвет фона */
    font-size: 14px; /* Размер текста */
    padding: 5px 20px; /* Поля вокруг текста */
   
  </style>
 </head> 
 <body> 
  <form>
    <button>Кнопка</button>
  </form>
 </body>
</html>

Вид ссылок показан на рис. 1.

.;


Рис. 1. Вид кнопки в браузере


Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Добавить рамку вокруг кнопки формы. Решение Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере.;1 показано создание кнопки, у которой задан цвет фона и рамка. Пример 1. Цветная кнопка HTML5 CSS 2.1 IE Cr Op Sa Fx Вид ссылок показан на рис. 1. .; Рис. 1. Вид кнопки в браузере

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))