Создаем объемную кнопку для сайта на CSS3 | RUDEBOXВ последнее время люди просто помешались на 3d, его можно встретить везде: в кино, постерах, вывесках и так далее. Но не прошла новая тенденция и мимо веб-дизайна, сейчас мало кого интересует минимализм, все хотят пафоса, объемности и трансформации. Конечно я поклонник минимализма, но не стоит обходить стороной новые тенденции. В сегодняшнем уроке мы рассмотрим как можно создать такой маленький элемент для сайта, а именно объемную кнопку для сайта с помощью css. Давайте посмотрим, что у нас с этого получилось..

Кнопка достаточно простая и практичная, она создает эффект объемности с помощью трансформаций css. И так, приступим.

Шаг 1. HTML

Разметка достаточно проста, нам необходимо создать класс с параметром “button”.

Здесь все понятно, перейдем к следующему шагу.

Создаем объемную кнопку для сайта на CSS3 | RUDEBOX

Шаг 2. CSS

Мы начнем с некоторых основных стилей, чтобы получить основные формы кнопки и цвет.

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

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

Теперь мы должны добавить немного теней, для реализма.

Далее добавляем 3D эффект для теней.

Мы не будем далее детально описывать все элементы теней, можно их просмотреть в исходниках. Рассмотрим трансформации, мы будем использовать 3D-преобразования. Для этого нам необходимо создать угол визуального наклона.

Угол наклона кнопки должен иметь otateX (20deg), в итоге мы получаем.

Данный прием экспериментальный, по этому будет работать полноценно только в браузерах Webkit! Окончательный код для наклона кнопки выглядит следующим образом.

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

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