Как убрать рамку у кнопок?
По умолчанию, браузер добавляет к кнопкам рамку, которая меняет свой стиль при изменении цвета фона кнопки. Вот как выглядит такая кнопка.
Кнопка
Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:
- задать нулевую толщину рамки;
- указать стиль рамки как none или hidden;
- установить прозрачный цвет рамки.
Толщина рамки
Используем свойство border-width с нулевым значением или универсальное border (пример 1).
Пример 1. Нулевая толщина рамки
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { padding: 1em 2em; /* Расстояние от текста до края */ background-color: #22a5cf; /* Цвет фона */ color: #fff; /* Цвет текста */ border: 0; /* Убираем рамку */ } </style> </head> <body> <p><button>Кнопка</button></p> </body> </html> Стиль рамки
За стиль рамки отвечает свойство border-style или, опять же, универсальное border. В качестве значения указываем none или hidden (пример 2).
Пример 2. Меняем стиль рамки
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { padding: 1em 2em; /* Расстояние от текста до края */ background-color: #137992; /* Цвет фона */ color: #fff; /* Цвет текста */ border: none; /* Убираем рамку */ } </style> </head> <body> <p><button>Кнопка</button></p> </body> </html>
Значения none и hidden дают одинаковый результат, но имеют небольшие отличия, которые проявляются только при создании линий в таблицах. Для кнопок эти значения равнозначны.
Прозрачный цвет
В CSS для прозрачного цвета зарезервировано ключевое слово transparent. Так что для рамки пишем свойство border-color или border с этим значением.
Прозрачный цвет рамки удобно задавать в ситуациях, когда рамка меняет свой цвет при наведении на кнопку курсора мыши или при щелчке по кнопке (пример 3).
Пример 3. Цвет рамки
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { padding: 1em 2em; /* Расстояние от текста до края */ background-color: #137992; /* Цвет фона */ color: #fff; /* Цвет текста */ border: 3px solid transparent; /* Убираем рамку */ transition: 0.5s; /* Время перехода */ } button:hover { border-color: #feae01; /* Цвет рамки при наведении */ } </style> </head> <body> <p> <button>Кнопка</button> <button>Кнопка</button> <button>Кнопка</button> </p> </body> </html>
В данном примере сперва задаём параметры рамки, но делаем её прозрачной через transparent. Затем в псевдоклассе :hover устанавливаем желаемый цвет рамки, который будет проявляться при наведении на кнопку.
Автор: Влад Мержевич
Источник: webref.ru