WebDesignMagazine.ru – Журнал о веб-дизайне

Интересный эффект для кнопки при наведении мышкой

0

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

Идея

Идея в том, чтобы сделать двухслойную кнопку, слоя которой отличаются лишь цветом. Мы будем использовать псевдо-элемент :after с содержанием, переданным через дата-атрибут.

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

 

fancy-effect-idea

HTML

Давайте начнем с разметки. Обратите внимание, что мы добавляем атрибут data-title к ссылке, значение которого – текст ссылки.

CSS

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

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

Это все – надеюсь вы тоже вдохновились! Удачного летнего отдыха или трудовых будней!

Поделиться: