Кнопки являются неотъемлемой частью любого интерфейса. Их можно создавать как с помощью элемента <button>, так и <a>. Разница в их использовании базируется на семантике HTML.
Кнопка — это элемент интерфейса, при нажатии на который происходит связанное с ним действие или событие. Ссылка же связывает документы между собой, при клике происходит переход на другую страницу (за исключением якорей, которые позволяют перемещаться в пределах одной страницы).
В примерах к уроку используется шрифт Helvetica.
Для создания данной анимированной кнопки вам надо перекопировать следующие части кодов:
После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:
Также, можем переопределить некоторые из стилей данной кнопки, вынеся их в отдельный класс и тем самым получить ту же анимированную кнопку, но, уже в других цветах.
для этого придумаем название класса, которым мы будем менять стили. Например: btnWhite
и теперь пишем следующий CSS-код:
Добавляем к нашей кнопке класс btnWhite:
<button type="button" class="btn btnWhite">Нажать на кнопку</button>
в итоге, получаем вот такую кнопку:
Точно таким же образом, вы можете менять стили отображения, которые помогут добавить на ваш сайт разноцветные кнопки.