Объемные кнопки основанные на псевдо-элементах

0

В этом уроке, я покажу вам, как создать кнопку с изюминкой, используя только анкорную ссылку (хотя данный эффект можно применить и к <button> или <input type="submit" />) и великую силу CSS. Месяц усердных тренировок с псевдо-элементами CSS привел к появлению на свет изящных кнопок, реализация которых раньше была возможна только с использованием CSS-спрайтов.

Разметка

Для каждого из 5 примеров мы будем использовать одну и ту же HTML-разметку, основанную на анкорной ссылке. Остальные элементы мы будем создавать через псевдо-класс ::before

 

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

Смотреть Демо

Пример 1

button1

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

Теперь при помощи ::before создадим серый контейнер, который выступит в качестве обводки нашей кнопки.

 Пример 2

button2

Этот пример по-сложнее из-за 3D вида кнопки. Она как бы находится за пределами своей контейнера, но по клику она уйдет вниз. Кнопка – это ссылка, контейнер – элемент ::before

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

Пример 3

button3

Эта кнопка разделена на номер и текст, которые вместе выглядят как единая кнопка. Но щелчок по кнопке “ломает” ее и текст уходит вниз.

Лучше, если мы начнем ее создать с более легких частей

И CSS для псевдо-элемента, который добавляет номер к кнопке

Пример 4

button4

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

Пример 5

button5

Этот пример вы можете реализовать в кнопке “Мне нравится” или нечто подобном

В завершение

Вот вам 5 примеров использования псевдо-элемента ::before – 5 клевых объемных кнопок. Спасибо за чтение этого урока, и я надеюсь, что вы найдете этому применение в своих дизайнах.

Поделиться: