ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффекты CSS при наведении на ссылку

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

Красивый эффект при наведении ссылок являются строительными блоками в интернете, где вашему вниманию набор эффектов, которые идут на чистом CSS. Где вашему вниманию представлена коллекция экспериментальных эффектов или трюков, что на прямую идут под ссылки, где в основе используются переходы на псевдоэлементах. Что можете ознакомиться с этими уникальными и современными эффектами.

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

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

Анимация CSS ссылок для навигации

Как пример, один из многих вариантов:

Установочный процесс:

HTML

Код

<div class="conuvasineg red kodnava">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg purple sinegeku">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg indigo gekulodesan">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg blue dsamodes">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg cyan brackets">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg teal asemduodug">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg green dugulasoved">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg lasovedopub kiloedopus">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg lime pullUp">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg yellow usolvsaced">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg amber pullLeft">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg orange pullUpDown">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg nspiringasukob sacedivedesam">
  <a>ГЛАВНАЯ</a>
  <a>ZORNET.RU</a>
  <a>СКРИПТЫ</a>
  <a>ШАБЛОНЫ</a>
  <a>ДИЗАЙН</a>
</div>

<div class="conuvasineg brown kpoedivedeles">
  <a alt="ГЛАВНАЯ">ГЛАВНАЯ</a>
  <a alt="ZORNET.RU">ZORNET.RU</a>
  <a alt="СКРИПТЫ">СКРИПТЫ</a>
  <a alt="ШАБЛОНЫ">ШАБЛОНЫ</a>
  <a alt="ДИЗАЙН">ДИЗАЙН</a>
</div>

<div class="conuvasineg gray kelesoladuned">
  <a alt="ГЛАВНАЯ">ГЛАВНАЯ</a>
  <a alt="ZORNET.RU">ZORNET.RU</a>
  <a alt="СКРИПТЫ">СКРИПТЫ</a>
  <a alt="ШАБЛОНЫ">ШАБЛОНЫ</a>
  <a alt="ДИЗАЙН">ДИЗАЙН</a>
</div>

CSS

Код

div.conuvasineg
{
  font-family: Raleway;
  margin: 0 auto;
  padding: 10em 3em;
  text-align: center;
}

div.conuvasineg a
{
  color: #FFF;
  text-decoration: none;
  font: 20px Raleway;
  margin: 0px 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.red
{
  background: #ef2315;
}

.purple
{
  background: #6130b9;
}

.indigo
{
  background: #3043ad;
}

.blue
{
  background: #1a87de;
}

.cyan
{
  background: #12c9e0;
}

.teal
{
  background: #0ca99a;
}

.green
{
  background: #38a93d;
}

.lasovedopub
{
  background: #84c33b;
}

.lime
{
  background: #b7c124;
}

.yellow
{
  background: #f9d11f;
}

.amber
{
  background: #e8b109;
}

.orange
{
  background: #ec9007;
}

.nspiringasukob
{
  background: #f34812;
}

.brown
{
  background: #67463a;
}

.gray
{
  background: #8a8686;
}

/* Верхняя и нижняя границы выходят наружу */
div.kodnava a:before, div.kodnava a:after
{
  position: absolute;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #FFF;
  content: "";
  opacity: 0;
  transition: all 0.3s;
}

div.kodnava a:before
{
  top: 0px;
  transform: translateY(10px);
}

div.kodnava a:after
{
  bottom: 0px;
  transform: translateY(-10px);
}

div.kodnava a:hover:before, div.kodnava a:hover:after
{
  opacity: 1;
  transform: translateY(0px);
}

/* Верхняя и нижняя границы входят */
div.sinegeku a:before, div.sinegeku a:after
{
  position: absolute;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #FFF;
  content: "";
  opacity: 0;
  transition: all 0.3s;
}

div.sinegeku a:before
{
  top: 0px;
  transform: translateY(-10px);
}

div.sinegeku a:after
{
  bottom: 0px;
  transform: translateY(10px);
}

div.sinegeku a:hover:before, div.sinegeku a:hover:after
{
  opacity: 1;
  transform: translateY(0px);
}

/* Верхняя граница опускается и появляется левая граница */
div.gekulodesan a:before
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 2px;
  height: 0px;
  background: #FFF;
  content: "";
  opacity: 1;
  transition: all 0.3s;
}

div.gekulodesan a:after
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #FFF;
  content: "";
  opacity: 1;
  transition: all 0.3s;
}

div.gekulodesan a:hover:before
{
  height: 100%;
}

div.gekulodesan a:hover:after
{
  opacity: 0;
  top: 100%;
}

/* Круг позади */
div.dsamodes a:before, div.dsamodes a:after
{
  position: absolute;
  top: 22px;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 4px solid #0277bd;
  transform: translateX(-50%) translateY(-50%) scale(0.8);
  border-radius: 50%;
  background: transparent;
  content: "";
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}

div.dsamodes a:after
{
  border-width: 2px;
  transition: all 0.4s;
}

div.dsamodes a:hover:before
{
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}

div.dsamodes a:hover:after
{
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Скобки выходят */
div.brackets a:before, div.brackets a:after
{
  position: absolute;
  opacity: 0;
  font-size: 35px;
  top: 0px;
  transition: all 0.3s;
}

div.brackets a:before
{
  content: '(';
  left: 0px;
  transform: translateX(10px);
}

div.brackets a:after
{
  content: ')';
  right: 0px;
  transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
  opacity: 1;
  transform: translateX(0px);
}

/* Граница от Y до X */
div.asemduodug a:before, div.asemduodug a:after
{
  position: absolute;
  opacity: 0.5;
  height: 100%;
  width: 2px;
  content: '';
  background: #FFF;
  transition: all 0.3s;
}

div.asemduodug a:before
{
  left: 0px;
  top: 0px;
}

div.asemduodug a:after
{
  right: 0px;
  bottom: 0px;
}

div.asemduodug a:hover:before, div.asemduodug a:hover:after
{
  opacity: 1;
  height: 2px;
  width: 100%;
}

/* Граница X получить ширину */
div.dugulasoved a:before, div.dugulasoved a:after
{
  position: absolute;
  opacity: 0;
  width: 0%;
  height: 2px;
  content: '';
  background: #FFF;
  transition: all 0.3s;
}

div.dugulasoved a:before
{
  left: 0px;
  top: 0px;
}

div.dugulasoved a:after
{
  right: 0px;
  bottom: 0px;
}

div.dugulasoved a:hover:before, div.dugulasoved a:hover:after
{
  opacity: 1;
  width: 100%;
}

/* Тянуть вниз */
div.kiloedopus a:before
{
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0px;
  top: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.kiloedopus a:hover:before
{
  height: 100%;
}

/* Подтянуть */
div.pullUp a:before
{
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0px;
  bottom: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.pullUp a:hover:before
{
  height: 100%;
}

/* Тянуть вправо */
div.usolvsaced a:before
{
  position: absolute;
  width: 2px;
  height: 100%;
  left: 0px;
  top: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.usolvsaced a:hover:before
{
  width: 100%;
}

/* Потяните влево */
div.pullLeft a:before
{
  position: absolute;
  width: 2px;
  height: 100%;
  right: 0px;
  top: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.pullLeft a:hover:before
{
  width: 100%;
}

/* Потяните вверх и вниз */
div.pullUpDown a:before, div.pullUpDown a:after
{
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.pullUpDown a:before
{
  top: 0px;
}

div.pullUpDown a:after
{
  bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
  height: 100%;
}

/* Потяните вправо и влево */
div.sacedivedesam a:before, div.sacedivedesam a:after
{
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.sacedivedesam a:before
{
  left: 0px;
}

div.sacedivedesam a:after
{
  right: 0px;
}

div.sacedivedesam a:hover:before, div.sacedivedesam a:hover:after
{
  width: 100%;
}

/* Выделить текст */
div.kpoedivedeles a
{
  color: rgba(255, 255, 255, 0.3);
}

div.kpoedivedeles a:before, div.kelesoladuned a:before
{
  position: absolute;
  color: #FFF;
  top: 0px;
  left: 0px;
  padding: 10px;
  overflow: hidden;
  content: attr(alt);
  transition: all 0.3s;
  transform: scale(0.8);
  opacity: 0;
}

div.kpoedivedeles a:hover:before, div.kelesoladuned a:hover:before
{
  transform: scale(1);
  opacity: 1;
}

/* Выделить текст */
div.kelesoladuned a
{
  color: rgba(0, 0, 0, 0.4);
}

div.kelesoladuned a:before
{
  transform: scale(1.2);
}

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

Демонстрация

06 Ноября 2019 Загрузок: 2 Просмотров: 1174 Комментариев: (1)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 06 Ноября 2019 01:22¹ 0 Если в этой подборке эффектов вы не нашли для своего сайта подходящее анимацию для ссылок, то также можете посмотреть в этой теме красивый эффект при наведении на ссылку при помощи стилистики.