Сегодня мы бы хотели поговорить о стилизации кнопок. Предпочтения пользователей постоянно меняются и угнаться за модой довольно тяжело, мы давно не публиковали уроков о создании кнопок, и сегодня, я решил это исправить. Речь пойдет о плоских, анимированных кнопках для сайта реализованных исключительно на CSS3. В демонстрации я покажу вам пять замечательных вариантов кнопок с различной анимацией к ним. Одни будут плавно окрашиваться в цвет, а вторые быстро обводиться линейной графикой.

 

Так как кнопки построены полностью на CSS3 они быстрые и легкие, а простота их редактирования поможет без проблем прикрутить к своей страничке. Смотрите также бесплатные шаблоны от наших партнеров:

Шаг 1. HTML

Так как у нас будет пять разных кнопок, для каждой кнопки нам понадобиться свой класс со стилями:

Разметка не сложная, это самая элементарная разметка, по этому не будем на ней останавливаться и двигаемся дальше.

Шаг 2. CSS

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

Вторая кнопка у нас будет реализована благодаря следующему стилю:

Для работы третьей кнопки, у нас будет следующий блок стилей:

Далее у нас будет кнопка под номером четыре, у нас ее реализация будет осуществляться с помощи такого стиля:

И наконец, последняя кнопка, но не менее привлекательная, с окрашиванием в красный цвет и плавной анимацией, а получилась она благодаря следующему стилю:

Каждая кнопка по своему уникальная, и привлекательная, порой за таким маленьким элементом скрывается удачливая приманка для посетителя.

Вот и все. Готово!