Современная 3D красивая кнопка CSS | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСовременная 3D красивая кнопка CSS
Дата: 25.04.2013 в 00:13 | Просмотров: 4267

Современная 3D красивая кнопка CSS

Своременная 3D красивая кнопка CSS
Скачатьбесплатно с сервера
Демодемонстрация

Ещё в прошлых уроках, мы рассматривали создание анимационных кнопок на CSS3. Сегодня увидим ещё один пример, только 3D кнопки. Красивая кнопка CSS будет иметь классный эффект вдавливания, а вид 3D будет создан за счет теней. Ниже приводится готовый код кнопки HTML, который Вы можете свободно использовать для создания своей, уникальной кнопки.

HTML основа

Код кнопки в HTML формате. Структура довольно простая.

Как видите ничего сложного здесь нет ;) ! Переходим к стилизации.

CSS

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

Используя все прелести CSS3, мы задаем градиент, скругление углов, и вообще сам цветовой стиль кнопки.

При наведении мы немного увеличиваем кнопку и устанавливаем вращение иконки на 360 градусов:

При нажатии на кнопку, мы делаем её меньше, и корректируем тени для реалистичной работы кнопки.

Полагаю, что на этом пока все. Итак, мы постарались сделать красивую кнопку CSS, которая бы привлекала внимание посетителя сайта. Надеюсь, вам понравилось!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
Перевел: Владислав Бондаренко


Добавить комментарий