Эффекты при наведении на ссылку!

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

Давайте начнем с самых простых эффектов

1. Изменение фона ссылки.

Ссылка

Как видите, при наведении на ссылку, фон меняется на синий.

Давайте рассмотрим как можно это осуществить.

Создаем новую запись, переходим в текстовый режим и создаем ссылку

<a href="#" id="link1">Ссылка</a>

вместо # указать адрес ссылки

Теперь в корне вашего сайта, необходимо найти файл Style.css и в самом низу прописать код.

#link1:hover {background:#5478AA;}

Не забудьте сохранить файл.

2. Плавное изменение цвета ссылки.

Ссылка 2

Здесь как видите, цвет ссылки при наведении плавно меняется на красный.

Также создаем ссылку и присваиваем ей идентификатор. Создаем новую запись и пишем

<a href="#" id="link2">Ссылка</a>

В файле Style.css вставьте код

#link2:hover {color:red;
transition: all .5s ease;}

transition — скорость изменения цвета.

3. Подчеркивание ссылки при наведении на чистом CSS3

Ссылка

Html код

<a href="#" id="link3">Ссылка 3</a>

Css код

#link3 {text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: Arial;
  font-weight: bold;
  padding: 0 0 5px 0;
  color: #eb5055;
}

#link3:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  bottom: 0;
  visibility: hidden;
  background-color: #eb5055;
  -webkit-transition: all .1s ease;
  transition: all 0.3s ease;  
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}

#link3:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

4. Интересный эффект вращения.

Ссылка 4

Html код

<div class="nav">
      <ul>
        <li><a href="#" id="link4"><span>Ссылка 4</span></a></li>
  </ul>
</div>

Css код

#link4 {
  color: #ff0000;
  font-weight: bold;
  overflow: hidden;
  vertical-align: top;
  display: inline-block;
  text-decoration: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  
}
.nav ul li {list-style-type: none;}
#link4.nav  span, #link4 span {
  display: block;
  position: relative;
  padding: 0 2px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
}
#link4.nav  span:before, #link4 span:before {
  content: attr(data-title);
  display: block;
  position: absolute;
  padding: 0 2px;
  color: #fff;
  background: #ff0000;
  top: 0;
  left: 0;
  opacity: 1;
  -webkit-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg );
  -moz-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg );
  -ms-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg );
  transform: translate3d( 0px, -105%, 0px ) rotateY( -360deg );
}
#link4.nav:hover span, #link4:hover span {
  background: #ff0000;
  color: #fff;
  -webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg );
  -moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg );
  -ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg );
  transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
}

Возможно вас также заинтересует статья на тему «Изменение картинки при наведении курсора«.