Коротко: убрать рамку у кнопки можно через border: none (или border: 0), а если это обводка фокуса — через свои стили :focus-visible. У кнопок бывает три «рамки»: border, outline и вдавленность от системного оформления — их убирают по-разному.
Три источника «рамки»
| Источник | Как убрать |
|---|---|
border |
border: 0 |
outline (фокус) |
заменить своим индикатором |
| Системное оформление | appearance: none |
Вкладки: варианты кода
.btn { border: 0; }
.btn { border: none; } /* то же самое */border: 0 и border: none равнозначны. Если рамка была «сверху-снизу» — задайте border: 0 целиком, чтобы сбросить все стороны.
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0,63,143,.35);
}Это правильный способ: визуально рамки нет, но фокус виден. Если написать outline: none без замены — сайт станет неудобным для клавиатуры.
input[type="submit"],
button {
-webkit-appearance: none;
appearance: none;
border: 0;
background: #003F8F;
color: #fff;
border-radius: 8px;
padding: 12px 20px;
font: inherit;
cursor: pointer;
}Для кнопок-инпутов и нативных button важно снять системное оформление и наследовать шрифт — иначе вид и размеры «поедут».
.btn--ghost {
background: transparent;
border: 1px solid #003F8F;
color: #003F8F;
}
.btn--ghost:hover { background: #003F8F; color: #fff; }Иногда «рамка» — элемент дизайна. Тогда её не убирают, а задают аккуратно: толщину, цвет и изменение при наведении.
Практика: привести все кнопки к одному виду
- Сбросьте системный вид:
appearance: none,border: 0,background. - Задайте размеры, радиус, шрифт наследуемый.
- Добавьте
cursor: pointer. - Опишите состояния
:hover,:active,:disabled. - Замените
outlineсвоим индикатором фокуса. - Проверьте в Safari, Chrome и на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Рамка «осталась» | это outline при клике | заменить своим индикатором |
| Кнопка «вдавленная» | системное оформление | appearance: none |
| В Safari выглядит иначе | свои стили webkit | добавить -webkit-appearance: none |
| Шрифт отличается от сайта | не наследуется | font: inherit |
Проверьте себя
border: 0?
Вопросы и ответы
Через «Дополнительные стили» задайте правило для класса кнопки: .wp-block-button__link { border: 0; } или класс вашей темы.
border занимает место в раскладке и часть дизайна. outline рисуется снаружи, места не занимает и обычно показывает фокус.
Правки были в родительской теме или в файлах. Перенесите стили в дочернюю тему или в «Дополнительные стили».
Базовую рамку уберите, а в :hover добавьте border или box-shadow. Учтите, что border может «сдвинуть» текст — компенсируйте прозрачной рамкой той же толщины.
Итоги
- Рамка — это
border, обводка —outline, «вдавленность» — системный стиль. - Убирайте outline только с собственной заменой для фокуса.
- Для нативных кнопок —
appearance: noneиfont: inherit. - Описывайте кнопку единым компонентом с состояниями.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.