Як додати рамку навколо кнопки?

Влад Мержевич

Тема:Лінії та рамки
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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.

Часті запитання