Как сделать красивые эффекты для ссылок на CSS3, а именно плавное изменение цвета при наведении и плавный сдвиг вправо.

40 917 любопытных

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

Почему этот способ простой? Потому что он делается только с помощью CSS. Никаких скриптов только стили.

В общем, дорогие друзья, давайте приступать.

Посмотреть пример

Плавное изменение цвета при наведении

Для всех ссылок

Друзья, для того чтобы этот эффект работал на всех ссылках на сайте, тогда просто нужно в Вашем CSS файле к классу а(ссылки) добавить тег transition. Желательно с префиксами для разных браузеров, это такая страховка. В общем вот как всё должно выглядеть:

a {

-moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

a:hover {
 color: #1FA2E1;
 }

По умолчанию здесь стоит 0,2 секунды при наведении курсора и 0.02 секунды после убирания. Другими словами здесь выставляется скорость анимации. Это значение Вы можете изменять как угодно, они стоят в примере.

В классе a:hover выставляется цвет ссылки, который будет плавно появляться при наведении на неё. По умолчанию стоит этот цвет #1FA2E1.

Для одной ссылки на странице (или разные цвета)

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

HTML

<ul>

<li class="s1"><a href="https://beloweb.name/category/wp">WordPress</a></li>

</ul>

Здесь мы придумали класс s1

CSS

.s1 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;

 }

.s1 a:hover {
 color: #ff6f5b;
 }

Всё. Теперь у нас плавность будет работать только на той ссылке где присвоен этот класс s1

Разные цвета ссылок

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

HTML

<ul>

<li class="s1"><a href="https://beloweb.name/category/wp">WordPress</a></li>

<li class="s2"><a href="https://beloweb.name/category/wp">Беловеб</a></li>

</ul>

Как видите, что второй тег li уже имеет класс s2.

CSS

.s1 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

.s1 a:hover {
 color: #ff6f5b;
 }

.s2 a {
 -moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }

.s2 a:hover {
 color: #55b857;
 }

Одним словом здесь мы задаём каждой ссылке отдельный цвет при наведении, а потом каждый класс задаём тегу (li) на странице.

Плавное смещение ссылки вправо на странице

Говорю сразу, что данный эффект, скорее всего многим не понравиться, но на практике я его часто замечаю. Мне он нравится и я хочу поделиться им с Вами.

Делается этот плавный сдвиг довольно просто. Всего лишь нужно присвоить к списку на странице тег div с соответствующим классом.

Для начала нам нужен сам html код списка, делать мы его будем с помощью тегов ul и li:

HTML

<div class="sdvig">

<ul>

<li><a href="https://beloweb.name/category/wp">WordPress</a></li>

<li><a href="https://beloweb.name/category/wp/plaginyi">Плагины</a></li>

<li><a href="https://beloweb.name/category/wp/shablonyi-wp">Шаблоны</a></li>

</ul>

</div>

Как Вы уже заметили, что мы к списку добавили тег <div> с классом sdvig.

Теперь, чтобы всё заработало в стили нужно добавить следующее:

CSS

.sdvig a {
 -moz-transition: all 0.1s ease-in-out;
 -o-transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 color:#222;
 display:block;
 }

.sdvig a:hover {
 -webkit-transform: translate(8px,0);
 -moz-transform: translate(8px,0);
 -o-transform: translate(8px,0);
 color: #1FA2E1;
 }

По умолчанию (как в примере) скорость анимации стоит 0.1 секунд, а расстояние сдвига в 8px. Естественно эти значения Вы можете изменять, поэкспериментировать, так сказать. :-)