Как убрать стандартные стили кнопки
Короткий ответ
Обнулите фон, рамку и отступы и унаследуйте шрифт и цвет от родителя:
<style>
.plain { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
</style>
<p>Price: $25 <button class="plain">✎ edit</button></p>Такая кнопка выглядит как обычный текст, но остаётся кнопкой: нажимается с клавиатуры и понятна скринридеру.
Сбросить всё одной строкой
all: unset убирает вообще все стили, включая браузерные. Потом возвращают то, что нужно:
<style>
.reset { all: unset; cursor: pointer; color: steelblue; }
.reset:focus-visible { outline: 2px solid orange; }
</style>
<button class="reset">Show more</button>Кнопка как ссылка
Если действие выглядит как ссылка в тексте («показать ещё», «отменить»), добавьте сброшенной кнопке цвет и подчёркивание ссылки. Тег остаётся <button>, потому что это действие, а не переход.
Частая ошибка
После all: unset пропадает и обводка фокуса — с клавиатуры кнопку больше не видно. Добавьте ей правило :focus-visible, как во втором примере. Ещё одна ловушка: all: unset сбрасывает display, и кнопка становится строчной, поэтому ширина и вертикальные отступы на неё не действуют, пока не задать display: inline-block.
Функции из этого ответа
- <button> — Кнопка: отправляет форму или запускает действие.
- appearance — Отключает встроенный вид элементов формы, чтобы оформить их с нуля.
- font — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
- cursor — Вид указателя мыши над элементом.