Добавить рамку вокруг кнопки - «Линии и рамки» » Новости мира Интернет
Вышел Wine 11 — запуск Windows-приложений и игр в Linux и macOS стал почти «родным» - «Новости сети»
Вышел Wine 11 — запуск Windows-приложений и игр в Linux и macOS стал почти «родным» - «Новости сети»
Глава Google DeepMind считает, что китайские разработчики ИИ-моделей отстают от американских лишь на несколько месяцев - «Новости сети»
Глава Google DeepMind считает, что китайские разработчики ИИ-моделей отстают от американских лишь на несколько месяцев - «Новости сети»
Две игры в одной: Capcom показала геймплей Resident Evil Requiem за Грейс и Леона - «Новости сети»
Две игры в одной: Capcom показала геймплей Resident Evil Requiem за Грейс и Леона - «Новости сети»
Nvidia настаивает, что сокращений в номенклатуре GeForce RTX 50 нет, но есть проблемы с поставками - «Новости сети»
Nvidia настаивает, что сокращений в номенклатуре GeForce RTX 50 нет, но есть проблемы с поставками - «Новости сети»
США вслед за Россией и Китаем пообещали построить атомную электростанцию на Луне - «Новости сети»
США вслед за Россией и Китаем пообещали построить атомную электростанцию на Луне - «Новости сети»
Apple выбрала Gemini в качестве основы для новой Siri - «Новости мира Интернет»
Apple выбрала Gemini в качестве основы для новой Siri - «Новости мира Интернет»
Apple представила платформу Creator Studio с коллекцией приложений для творчества - «Новости мира Интернет»
Apple представила платформу Creator Studio с коллекцией приложений для творчества - «Новости мира Интернет»
Google научила Veo создавать вертикальные видео в 4K для мобильных платформ - «Новости мира Интернет»
Google научила Veo создавать вертикальные видео в 4K для мобильных платформ - «Новости мира Интернет»
NVIDIA добавила поддержку DLSS 4.5 Super Resolution во все видеокарты GeForce RTX - «Новости мира Интернет»
NVIDIA добавила поддержку DLSS 4.5 Super Resolution во все видеокарты GeForce RTX - «Новости мира Интернет»
Spigen выпустила ретро-чехол для iPhone 17 Pro в стиле классического Macintosh - «Новости мира Интернет»
Spigen выпустила ретро-чехол для iPhone 17 Pro в стиле классического Macintosh - «Новости мира Интернет»
Новости мира Интернет » Самоучитель 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. Вид кнопки в браузере

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

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. Вид кнопки в браузере

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

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



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