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

Эффект подчеркивания ссылки виде стрелки CSS3

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

Сама идея состоит, что можно все анимировать и главное красиво смотрится, а точнее сам эффект при наведении. Здесь подключаем переходы hover, но вы также можете представить эти эффекты в начальной анимации. Все выполнено красиво и простой, так как здесь будем использовать CSS3, где также предоставлена демонстрация. Что теперь можно не подчеркивать переходы, а теперь все автоматически будет устанавливаться, что отличное решение для гостей и пользователей сайта. А это отлично видно слова, что выставлена под ссылку, где безусловно все читабельно

По умолчанию, цвет сами можете подобрать:

Это при наведение курсора:

Приступаем к установке:

HTML

Код

<p>Blizzard молчала по этой идее, но только что выпустила патч <a href="http://zornet.ru">ZORNET.RU</a> выпуске вебмастеров и о том, что на перспективу будет немного волнений, <a href="#">реальном времени</a> Warcraft III широко считается одной из лучших игр.</p>

CSS

Код

p {
  padding: 9px;
  width: 100%;
  max-width: 500px;
  line-height: 1.4;
}

a {
  display: inline-block;
  position: relative;
  color: #252121;
  text-decoration: none;
  padding: 0 7px;
}
a:before, a:after {
  will-change: transform;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
a:before {
  -webkit-transition: 100ms ease-out 50ms;
  transition: 100ms ease-out 50ms;
  -webkit-transform-origin: 0 24px;
  transform-origin: 0 23px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #87a6c7;
}
a:after {
  -webkit-transition: 50ms ease-out;
  transition: 50ms ease-out;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  bottom: 2px;
  right: -12px;
  border: 8px solid transparent;
  border-left-color: #506c8c;
}
a:hover:before {
  -webkit-transition: 100ms ease-out;
  transition: 100ms ease-out;
  -webkit-transform: scaleY(0.18);
  transform: scaleY(0.18);
  background: #497bb5;
}
a:hover:after {
  -webkit-transition: 50ms ease-out 100ms;
  transition: 50ms ease-out 100ms;
  -webkit-transform: none;
  transform: none;
}
a:active:before {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  background: #60a8f9;
}
a:active:after {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  border-left-color: #60a8f9;
}

На этом вся установка!

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

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

HTML

Код

<a href="http://zornet.ru" class="zornet_ru_pogserka">ZorNet: Создание сайта на uCoz</a>

CSS

Код

.zornet_ru_pogserka {
  position: relative;
  color: #1f7786;
  cursor: pointer;
  font-size: 25px;
}
.zornet_ru_pogserka:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background-color: #982100;
  content: "";
  transition: width 0.2s;
}
.zornet_ru_pogserka:hover {
  color: #983900;
}
.zornet_ru_pogserka:hover:after {
width: 100%;
}

Аналогично представлена демонстрация

26 Февраля 2018 Просмотров: 1443 Комментариев: (0)

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

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

Kosten

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