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

Эффекты оформления ссылок сайта на CSS

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

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

Из этого делаем вывод, что они нужны в разных материалах, но нам нужно сделать их красивыми, так, чтоб стильно смотрелись внутри контента или написанной статьи. Здесь варианты сделаны так, что вы открываете сайт или отдельную статью на страницы, то сразу заметите все ссылки, это для того, чтоб на них обращали внимание. Но здесь также можно создать не сильно яркий стиль, что аналогично вписывается под контент или дизайн сайта.

Первый вариант:

HTML

Код

<div class="danrolpdab-mugetdsav">
<p>Здесь описание и переход по <a href="http://zornet.ru/load/81">Скрипты для uCoz</a>. Где далее кратко описываем под <a href="/">Ключевую фразу</a> для перехода по ней на материал. </p>
</div>

CSS

Код

.danrolpdab-mugetdsav a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: #141415;
  transition: color .4s ease-out;
}
.danrolpdab-mugetdsav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #174c84;
  transition: height .4s ease-out;
}

.danrolpdab-mugetdsav a:hover {
  color: #f6f6f7;
}
.danrolpdab-mugetdsav a:hover::before {
  height: 100%;
}

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

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

Второй вариант:

Подборка красивых эффектов при наведении для ссылок

HTML

Код

<div class="kendugamitu-klodopmas">
<p>Для того, чтоб увидеть эффект, то наводим курсор на <a href="http://zornet.ru/load/142">Шаблоны для uCoz</a> и он появиться. Где также можно под ссылку установить большое по знакам ключевое слово, как это <a href="/">Здесь может быть ключевые фразы</a>, по которым переходим на другую страницу.</p>
</div>

CSS

Код

.kendugamitu-klodopmas a {
  color: #2369a5;
  text-decoration: none;
  transition: color .3s ease;
}
.kendugamitu-klodopmas a:hover {
  animation: blur 1s ease-out;
  color: #121213;
}
@keyframes blur {
  from {
  text-shadow:0px 0px 10px #aed0ec,
  0px 0px 10px #aed0ec,
  0px 0px 25px #aed0ec,
  0px 0px 25px #aed0ec,
  0px 0px 25px #aed0ec,
  0px 0px 25px #276ba5,
  0px 0px 50px #276ba5,
  0px 0px 50px #276ba5;
  }
}

Аналогично можно применять вспышку цвета на темном или светлом сайте.

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

Третий вариант:

HTML

Код

<div class="gemakesaben-kaprogavusen">
<p>Этот вариант также отличается при наведение на каталог <a href="http://zornet.ru/load/146">JavaScript и jQuery</a>, тем, что слева на право сопровождается палитра - <a href="/">даже не считая, что ссылка выставлена под больной обзор</a>, где все корректно выводит</p>
</div>

CSS

Код

.gemakesaben-kaprogavusen a {
  background: linear-gradient(to right, #aed3f3 0%, #a4ccec 5px, rgba(0, 0, 0, 0) 5px);
  background-repeat: repeat-x;
  background-size: 100%;
  color: #106bb9;
  padding-left: 8px;
  text-decoration: none;
}
.gemakesaben-kaprogavusen a:hover {
  background: linear-gradient(to right, #a6d1f5 0%, #a6d1f5 5px, transparent);
}

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

Демонстрация
Источник: atuin.ru

22 Февраля 2019 Загрузок: 1 Просмотров: 1282 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0