Красивыми кнопками для сайта с помощью css уже мало кого удивляют, но все же находятся такие которые продолжают удивлять своей простотой и в тоже время оригинальностью своего исполнения. В данном уроке мы рассмотрим процесс создания замечательных, на мой взгляд, кнопок, с помощью css. Данной особенностью кнопок являются эффекты которые раньше можно было достичь только благодаря спрайтам, в данных кнопках мы не будем использовать изображения. В примере мы рассмотрим несколько вариантов кнопок с различными эффектами и построением.

Весомым плюсом является кроссбраузерность кнопок в последних версиях браузеров. Работоспособность кнопок была проверена в Google Chrome, Firefox 10 и IE9. И так, приступим, рассмотрим стили всех кнопок. Первым шагом будет создание HTML-разметки:

Для работы всех кнопок пригодится только якорь, все остальные элементы мы будем создавать с помощью псевдо-класса :before.

Прежде всего, зададим основные стили для кнопки в обычном и активном состоянии. Обратите внимание, что кнопка позиционирована относительно. Это поможет при позиционировании элемента ::before:

Теперь сделаем серый контейнер вокруг кнопки, используя псевдо-элемент ::before. Абсолютное позиционирование сделает нашу жизнь легче при позиционировании самого элемента.

Этот пример немного сложнее из-за 3D-эффекта. Изначально кнопка находится за пределами контейнера, затем, при щелчке она уходит вниз:

Так как положение псевдо-элемента зависит от родительского элемента, то при перемещении родительского элемента на несколько пикселей, псевдо-элемент необходимо переместить на столько же пикселей, но в другую сторону.

Обратите внимание на то, что здесь появился отступ. Он необходим для компенсирования ширины псевдо-элемента, если нужно расположить кнопку по центру. Если же не нужно, то отступ можно не использовать.

Теперь перейдем к псевдо-элементам:

На этот раз мы будем использовать псевдо-элемент для стрелки, используя фоновое изображение. Вместо изображений так же можно использовать эти шрифтовые иконки.

Данная кнопка может заменить «мне нравится» на сайте, кнопка достаточно привлекательная и имеет объемный эффект, вот как ее можно сделать:

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

Читайте также: