Как сделать кнопку из одного HTML тега и CSS

В верстке мы практически всегда занимаемся стилизацией элементов, порой и даже чаще всего верстальщики используют не семантически верный тег HTML5 Button, а обычные блоки или вообще тег ссылки. Но в любом случае эта практика очень полезна. Сейчас рассмотрим на примере простой ссылки и стилизуем ее.

Для этого создадим HTML код с тегом a и с классом new-button:

<a class="new-button">Button</a>

И для того чтобы это было более менее похоже на кнопку, нужно стилизовать, добавив как минимум цвет блока и текста:

.new-button {
  background: #000000;
  color: #ffffff;
}

Хорошо, получился простой блок, напоминающий кнопку. Но у него есть существенный недостаток. Если посмотрим на обычные кнопки, там есть отступы внутри, текст центруется и по краям может присутствовать рамка. Сделаем кнопку в Metro стиле под Windows. Допустим, кнопка будет размещена на белом фоне, мы для нее сделаем черную рамку в пару пикселей:

border: solid 2px #000000;

Затем, внутренние отступы по 10 пикселей:

padding: 10px;

Кнопка готова, но можно еще слегка добавить красоты, допустим скруглим углы по 10%:

border-radius: 10%;

И чтобы пользователь понимал, что на нее можно кликать мы добавим анимацию наведения, что делается псевдоклассом hover на нашем элементе. Добавим новый стиль и изменим значения цвета текста, рамки и фона элемента.

.new-button:hover {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
}

И да чуть не забыл, тег ссылки по умолчанию является строчным элементом, чтобы он корректно отображался нужно добавить ему правило отображения inline-block:

display: inline-block;

В целом получилось неплохо, вот весь код примера:

<style>
  .new-button {
    background: #ffffff;
    color: #000000;
    display: inline-block;
    border: solid 2px #000000;
    padding: 10px;
    border-radius: 10%;
  }
  
  .new-button:hover {
    background: #000000;
    color: #ffffff;
    border-color: #ffffff;
  }
</style>

<a class="new-button">Button</a>

Если хочется еще и приятной анимации, можно в класс кнопки добавить правило:

transition: 0.3s all;