Верстка кнопки - a или button

#html #css

Часто вижу что верстают кнопку при помощи ссылки то есть a>span. И
уже их стилизируют под кнопку. Нормальная ли это практика и где
здесь плюсы? Я же придерживаюсь стандартной button.
Как лучше задавать ширину и высоту кнопки, фиксированную или исходя из содержимого
кнопки, тс при помощи padding'ов?

    

Ответы

Ответ 1

На первый пункт вопроса ответ взял у Флэнагана: 


  Когда действие, выполняемое обработчиком onclick, можно классифицировать как «переход
по ссылке», используйте ссылку. В
  противном случае используйте кнопку.


Ответ 2

Чаще всего используется фиксированная ширина кнопки(если страница уже нарисована),
а когда страница верстается как шаблон для cms или заготовка - тогда могут быть и паддинги.


Ответ 3

1 Вопрос.




На первом изображении 
На втором изображении 
Мысль в том, что лучше придерживаться семантики, но иногда бывают и исключения.

2. Вопрос. Лучше паддингами.

Вообще лучще задавать шаблон кнопки, как пример так:

/* Кнопка (цветная) */
.button {
  font-size: 13px;
  font-weight: 600;
  padding: 15px 45px;
  border-radius: var(--radius);
  color: var(--white);
  text-align: center;
  display: block;
  width: border-box;
  box-sizing: content-box;
  max-width: fit-content; }
.button.blue {
  background-color: var(--blue);
}
.button.green {
  background-color: var(--green);
}