Коротко: убрать границы у кнопки можно через border: none, а также снять системное оформление браузера: appearance: none, background: none, outline: none (осторожно с фокусом). Если у кнопки видна «двойная» рамка при нажатии — её даёт outline или системный стиль браузера.
Что именно «рисует» рамку
| Свойство | Что убирает |
|---|---|
border |
обычную рамку |
outline |
обводку фокуса |
appearance |
системное оформление элемента |
box-shadow |
тень-«объём», если она есть |
Вкладки: способы с кодом
.btn {
border: none;
background: #003F8F;
color: #fff;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
}Самый частый случай: убрали рамку и задали свой фон. Не забывайте про cursor: pointer — иначе курсор не подскажет кликабельность.
.btn {
-webkit-appearance: none;
appearance: none; /* снять системный вид */
border: 0;
background: #003F8F;
}На мобильных Safari/Chrome стандартные кнопки выглядят «нативно» и добавляют скругления. appearance: none убирает это, чтобы вид полностью задавал ваш CSS.
outline: none делает кнопку невидимой для навигации с клавиатуры. Замените обводку своей:.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0,63,143,.35);
}Так рамка не мешает виду, но пользователь видит, где находится фокус.
a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
}Если «кнопка» сделана из ссылки, кроме рамки уберите подчёркивание и задайте display, чтобы получилась настоящая кнопка.
--primary, --ghost). Тогда «убрать границы» нужно в одном месте, а не в каждом правиле.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Рамка осталась | это outline |
задать своё :focus-visible |
| Кнопка «вдавливается» | системный стиль | appearance: none |
| Не видно фокуса | убрали outline без замены | добавить box-shadow-обводку |
| Курсор не «рука» | нет стиля курсора | cursor: pointer |
Проверьте себя
outline: none кнопке?
appearance: none?
Вопросы и ответы
border — часть рамки элемента, занимает место в раскладке. outline — внешняя линия (обычно фокус), места не занимает.
Задайте модификатору --ghost прозрачный фон и border: none, оставив цвет текста и состояния.
Каждый браузер применяет свои стили по умолчанию. Полный сброс (border, background, appearance) приводит все к одному виду.
Задайте background: transparent и border: 1px solid #003F8F, а при наведении меняйте фон на цветной.
Итоги
- Рамка кнопки —
border: none, системный вид —appearance: none. - Outline нужен для доступности: замените его своим индикатором фокуса.
- Не забывайте
cursor: pointerи состояния. - Описывайте кнопку единым компонентом с модификаторами.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.