Создаем красивые кнопки для сайта на CSS3
Красивы кнопки будут не только привлекать взор посетителя, но и дополнять общую картину сайта с помощью простой и в тоже время, уникальной анимацией. Сейчас на просторах веб-дизайна царит минимализм, все чаще разработчики стараются придерживаться этой тенденции и ровняться на дизайн Metro. В данном уроке мы рассмотрим именно такие кнопки. Этот набор кнопок состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии.
Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления и удаления классов. Иконки, которые мы используем совместно с псевдо-классами :before и :after, создали при помощи сервиса IcoMoon
Шаг 1. HTML
Для начала нам необходимо создать простую разметку, мы просто добавляем общий класс и один уникальный:
1 |
<button class="btn btn-6 btn-6d">Кнопка</button> |
Следует отметить, что мы используем определенные пронумерованные классы для различных наборов стилей кнопок. Каждая кнопка имеет дополнительный уникальный класс.
С использованием иконки, мы добавляем класс иконки, который будет использовать псевдо элемент :before.
Шаг 2. CSS
Теперь рассмотрим стили, мы приведем пример стилизации одной кнопки, более детально можно рассмотреть в исходниках:
1 2 3 4 5 6 7 8 |
.btn-6d { border: 2px dashed #226fbe; } .btn-6d:hover { background: transparent; color: #226fbe; } |
В демонстрации мы рассмотрели несколько примеров кнопок, их разметки практически идентичны, необходимо изменить параметры вывода кнопки.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 20.06.2013 в 09:57, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |