Создаем красивые кнопки для сайта на CSS3

Красивы кнопки будут не только привлекать взор посетителя, но и дополнять общую картину сайта с помощью простой и в тоже время, уникальной анимацией. Сейчас на просторах веб-дизайна царит минимализм, все чаще разработчики стараются придерживаться этой тенденции и ровняться на дизайн Metro. В данном уроке мы рассмотрим именно такие кнопки. Этот набор кнопок состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии.

Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления и удаления классов. Иконки, которые мы используем совместно с псевдо-классами :before и :after, создали при помощи сервиса IcoMoon

Шаг 1. HTML

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

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

С использованием иконки, мы добавляем класс иконки, который будет использовать псевдо элемент :before.

Шаг 2. CSS

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

В демонстрации мы рассмотрели несколько примеров кнопок, их разметки практически идентичны, необходимо изменить параметры вывода кнопки.

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

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