
В верстке мы практически всегда занимаемся стилизацией элементов, порой и даже чаще всего верстальщики используют не семантически верный тег 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;
0 комментариев