Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как убрать стандартные стили кнопки

Короткий ответ

Обнулите фон, рамку и отступы и унаследуйте шрифт и цвет от родителя:

<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 — Вид указателя мыши над элементом.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.