Эффект наведения ссылки с изменением цвета справа налево
Лично мне нравится использовать этот эффект для ссылок в навигации. Ссылка начинается одним цветом без подчеркивания. Затем, при наведении курсора, справа появляется новый цвет, а слева - подчеркивание.
Красиво, правда? Там происходит много движения, поэтому вы можете рассмотреть последствия доступности и обернуть все это в prefers-reduced-motion запрос, чтобы заменить его чем-то более тонким для тех, кто чувствителен к движению.
Вот как это работает. Мы придаем ссылке линейный градиент фона с жесткой остановкой между двумя цветами на полпути.
a {
background-image: linear-gradient(to right, 54b3d6, 54b3d6 50%, 000 50%);
}
Мы делаем фон вдвое больше ширины ссылки или 200% и размещаем его полностью слева. Таким образом, как будто отображается только один из градиентов двух цветов.
a {
background-image: linear-gradient(to right, 54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
}
Волшебство происходит, когда мы достигаем пары нестандартных -webkit-свойств с префиксами. Один из них удаляет цвет из текста, чтобы сделать его прозрачным. Другой обрезает градиент фона к тексту, так что кажется, что текст на самом деле является цветом фона.
a {
background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Все еще со мной? Теперь давайте сделаем искусственное подчеркивание ссылки ::before, применив его. Мы придадим ему тот же цвет, что и скрытой части градиента фона ссылки, и разместим его под фактической ссылкой, чтобы она выглядела как правильная text-decoration: underline.
a:before {
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
}
При наведении мы перемещаемся ::before на место, заходя слева:
a:hover { background-position: 0; }
Теперь это немного сложнее. При наведении мы делаем ::before псевдоэлемент ссылки 100% от ширины ссылки. Если бы мы применили это непосредственно к наведению ссылки, мы бы сделали саму ссылку во всю ширину, что перемещает ее по экрану. Ого!
a:hover::before {width: 100%; }
Добавьте небольшой переход, чтобы сгладить ситуацию:
a {
background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
Полный CSS
a { background-image: linear-gradient( to right, 54b3d6, 54b3d6 50%, 000 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }
a:before { content: ''; background: 54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }
a:hover { background-position: 0; } a:hover::before { width:100%; }
Эффект наведения ссылок с подчеркиванием радуги
Мы не можем сделать text-decoration-color: rainbow, но мы можем подделать это с помощью небольшой background магии, смешанной с линейными градиентами.
Сначала мы удаляем ссылки text-decoration:
a { text-decoration: none; }
Теперь перейдем к этим градиентам. Мы объединяем два линейных градиента в одно background свойство. Один градиент - это начальный цвет перед наведением. Вторая - радуга при наведении.
a {
background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
}
Давайте сделаем размер фона небольшим 3px, чтобы он выглядел, знаете, как подчеркивание. Мы можем совместить оба градиента в background-size свойстве так, чтобы начальный градиент был полной ширины и 3px высоты, а радуга - нулевой ширины.
a {
background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 100% 3px, 0 3px;
}
Теперь мы можем расположить фоновые градиенты — одновременно в background-position свойстве — так, чтобы первый градиент был полностью виден, а радуга была скрыта из виду. О, и давайте убедимся, что фон не повторяется, пока мы этим занимаемся.
a {
background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)), linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
Давайте обновим background-size при наведении, чтобы градиенты меняли значения:
a:hover { background-size: 0 3px, 100% 3px; }
И, наконец, небольшой переход при наведении:
a {
background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}
Эффект наведения ссылки с переходящим подчеркиванием
Джефф Грэм на самом деле рассматривал тот же самый недавно, когда он анализировал эффект скользкого наведения Адама Аргайла. В его демо-версии цвет фона появляется слева позади ссылки, а затем исчезает справа при наведении мыши.
Моя версия убирает фон, поэтому он больше подчеркнут.
a { position: relative; }
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0; left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}