Vitamin – сервис для выгодного управления вашей рекламой
  • Все популярные рекламные сети в одном окне
  • Агентское вознаграждение до 16% на личный счет или рекламу
  • Любые дополнительные услуги под ваши потребности
  1. Главная >
  2. Блог >
  3. >
  4. Интересный эффект для кнопки при наведении мышкой

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

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

Идея

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

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

Эффект при наведении

HTML

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

<a class="button" href="#" data-title="Скачать">
  <span>
    <span>Скачать</span>
  </span>
</a>

CSS

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

.button {
  display: block;
  position: relative;
  height: 3.4em;
  width: 10em;
  margin: .7em auto;
  overflow: hidden; }

  .button > span {
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    transition: 1s ease-in-out; }

/*.button:after and .button >
span > span are identical except for the inverted colors*/

  .button:after, .button > span > span {
    display: block;
    text-align: center;
    border-radius: 0.625em;
    padding: 1em 0; }
  .button:after {
    content: attr(data-title);
    width: 100%;
    background: #4186b2;
    color: #67d6c1; } 
  .button > span > span {
    width: 10em;
    background: #67d6c1;
    color: #4186b2; }

 /* what happens on hover */ 
 .button:hover > span {
    width: 100%; }

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

.button > span {
    ..
    width: 100%;
    height: 0%;
    .. }
 .button:hover > span {
    height: 100%; }

Это все.

Высоких конверсий! 

blog comments powered by Disqus
Vitamin – сервис для выгодного управления вашей рекламой
  • Все популярные рекламные сети в одном окне
  • Агентское вознаграждение до 16% на личный счет или рекламу
  • Любые дополнительные услуги под ваши потребности
copyright © 2011–2021 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25