Webmasters.BY

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

В этом уроке я покажу вам, как создать симпатичные кнопки с изюминкой, при помощи одного только тега А и всей мощи  CSS.

В примерах используется шрифт "Open Sans" Steve Matteson-а.

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

Я избегал использование CSS переходов, поскольку, на данный момент, Firefox является единственным браузером, поддерживающим их для псевдо-элементов. Кроме того, я считаю, что эти кнопки работают нормально и без них.

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

HTML-разметка

Пример 1

Я думаю, что это самый простой пример, с обычным CSS-кодом.

CSS

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

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

Пример 2

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

CSS

А это довольно сложная часть:

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

Пример 3

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

CSS

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

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

Пример 4

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

CSS

Пример 5

Этот пример немного "сырой", я знаю, но вы можете попробовать его немного доработать.

CSS

Заключение

Вот и всё. Но помните, что эти кнопки пока еще экспериментальные, и не каждый браузер отображает их корректно.

Спасибо за чтение этого урока, и я надеюсь, что вы нашли его полезным.

Скачать исходники

Перевод статьи с tympanus.net/codrops