Коротко: чтобы у кнопки не было фона, задайте background: transparent, уберите рамку (border: 0), тень (box-shadow: none) и системное оформление (appearance: none). Проверьте состояния :hover и :focus-visible.
Почему фон «не убирается»
У кнопки может быть сразу несколько «фонов»:
background-color— цвет заливки;background-image— градиент или картинка;box-shadow— тень, похожая на фон;- системное оформление браузера (не убирается обычным цветом).
Чтобы получить полностью «прозрачную» кнопку, нужно «выключить» все эти пункты.
Вкладки: три готовых варианта
.btn {
background: transparent;
border: 0;
box-shadow: none;
appearance: none;
}.btn-ghost {
background: transparent;
color: #003F8F;
border: 2px solid #003F8F;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
}
.btn-ghost:hover { background: #003F8F; color: #fff; }.btn:focus-visible { outline: 2px solid #992222; outline-offset: 2px; }
.btn:active { transform: translateY(1px); }Контур фокуса не убирайте полностью — он нужен для навигации с клавиатуры.
Практика: три задачи
1. Кнопка-ссылка без фона
a.link-btn { background: transparent; text-decoration: none; color: #003F8F; }2. Иконка-кнопка (закрыть, меню)
.icon-btn {
background: transparent; border: 0; padding: 8px;
width: 44px; height: 44px; /* удобно нажимать на телефоне */
}3. «Призрачная» кнопка на цветном фоне
.btn-ghost--light { color: #fff; border-color: #fff; }
.btn-ghost--light:hover { background: #fff; color: #003F8F; }:hover или :active. Проверьте все состояния кнопки, а не только базовое.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Осталась «рамка» браузера | не сброшен appearance |
appearance: none |
| Фон появляется при наведении | задан в :hover |
переопределить на transparent |
| Осталась тень | это box-shadow |
box-shadow: none |
| Пропала доступность | убран outline |
вернуть видимый фокус |
Проверьте себя
Вопросы и ответы
Практически одно и то же. transparent нагляднее показывает намерение «фон прозрачный».
Градиент — это background-image. Обнулите его: background-image: none.
Технически да, но это плохо для доступности. Оставьте видимый контур, лучше собственный.
Меняются рамка/тень или добавлен transform в :active. Следите, чтобы состояния были согласованы.
Итоги
- Фон —
transparent, рамка —border: 0, тень —box-shadow: none. - Системный вид —
appearance: none. - Проверяйте все состояния и сохраняйте фокус.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.