ZorNet.Ru — сайт для вебмастера » HTML и CSS » 8 различных hover-эффектов для ссылок

8 различных hover-эффектов для ссылок

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

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

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

Набор из восьми красивых эффектов наведения ссылок

HTML

Код

<h2><a class="amazing-kusinked-1" href="">Красивый эффекты 1</a></h2>
<h2><a class="amazing-kusinked-2" href="">Стильный эффекты 2</a></h2>
<h2><a class="amazing-kusinked-3" href="">Оригинальный эффекты 3</a></h2>
<h2><a class="amazing-kusinked-4" href="">Светлый эффекты 4</a></h2>
<h2><a class="hover-5" href=""><span>Темный эффекты 5</span></a></h2>
<h2><a class="amazing-kusinked-6" href=""><span>Прозрачный эффекты 6</span></a></h2>
<h2><a class="amazing-kusinked-7" href="" data-content="Нормальный эффекты 7"><span>Нормальный эффекты 7</span></a></h2>
<h2><a class="amazing-kusinked-8" href="" data-content="Удивительные эффекты 8"><span>Удивительные эффекты 8</span></a></h2>

CSS

Код

.amazing-kusinked-1 {
  padding-top: 10px;
}
.amazing-kusinked-1:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #492059;
  transform: scaleX(0);
}
.amazing-kusinked-1:hover:before {
  transform: scaleX(1);
}
.amazing-kusinked-2 {
  padding: 10px;
}
.amazing-kusinked-2:before, .amazing-kusinked-2:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #492059;
}
.amazing-kusinked-2:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
.amazing-kusinked-2:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
.amazing-kusinked-2:hover:before, .amazing-kusinked-2:hover:after {
  transform: scale(1, 1);
}
.amazing-kusinked-3 {
  display: inline-flex;
  padding-top: 10px;
  padding-bottom: 5px;
  overflow: hidden;
}
.amazing-kusinked-3:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #492059;
  transform: translateX(-100%);
}
.amazing-kusinked-3:hover:before {
  transform: translateX(0);
}
.amazing-kusinked-4 {
  padding: 10px;
  display: inline-flex;
  overflow: hidden;
}
.amazing-kusinked-4:before, .amazing-kusinked-4:after {
  left: 0;
  width: 100%;
  height: 2px;
  background: #492059;
}
.amazing-kusinked-4:before {
  bottom: 0;
  transform: translateX(-100%);
}
.amazing-kusinked-4:after {
  top: 0;
  transform: translateX(100%);
}
.amazing-kusinked-4:hover:before, .amazing-kusinked-4:hover:after {
  transform: translateX(0);
}
.amazing-kusinked-5 {
  display: inline-block;
  overflow: hidden;
}
.amazing-kusinked-5:before, .amazing-kusinked-5:after {
  right: 0;
  bottom: 0;
  background: #492059;
}
.amazing-kusinked-5:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
}
.amazing-kusinked-5:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
}
.amazing-kusinked-5 > span {
  display: flex;
  padding: 10px;
}
.amazing-kusinked-5 > span:before, .amazing-kusinked-5 > span:after {
  left: 0;
  top: 0;
  background: #492059;
}
.amazing-kusinked-5 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
}
.amazing-kusinked-5 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
}
.amazing-kusinked-5:hover:before, .amazing-kusinked-5:hover:after, .hover-5:hover > span:before, .amazing-kusinked-5:hover > span:after {
  transform: translate(0, 0);
}
.amazing-kusinked-6 {
  display: inline-flex;
  overflow: hidden;
}
.amazing-kusinked-6:before, .amazing-kusinked-6:after {
  right: 0;
  bottom: 0;
  background: #492059;
  transition: transform .3s ease;
}
.amazing-kusinked-6:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
  transition-delay: .9s;
}
.amazing-kusinked-6:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
  transition-delay: .6s;
}
.amazing-kusinked-6 > span {
  display: flex;
  padding: 10px;
}
.amazing-kusinked-6 > span:before, .amazing-kusinked-6 > span:after {
  left: 0;
  top: 0;
  background: #492059;
  transition: transform .3s ease;
}
.amazing-kusinked-6 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
  transition-delay: .3s;
}
.amazing-kusinked-6 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
  transition-delay: 0s;
}
.amazing-kusinked-6:hover:before, .amazing-kusinked-6:hover:after, .amazing-kusinked-6:hover > span:before, .amazing-kusinked-6:hover > span:after {
  transform: translate(0, 0);
}
.amazing-kusinked-6:hover:before {
  transition-delay: 0s;
}
.amazing-kusinked-6:hover:after {
  transition-delay: .3s;
}
.amazing-kusinked-6:hover > span:before {
  transition-delay: .6s;
}
.amazing-kusinked-6:hover > span:after {
  transition-delay: .9s;
}
.amazing-kusinked-7 {
  display: inline-block;
  overflow: hidden;
}
.amazing-kusinked-7:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #492059;
  transform: translateX(-100%);
}
.amazing-kusinked-7:after {
  content: attr(data-content);
  left: 0;
  top: 0;
  width: 0;
  margin: 12px;
  color: #492059;
  white-space: nowrap;
  overflow: hidden;
  transition: width .5s ease;
}
.amazing-kusinked-7 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #9556AE;
}
.amazing-kusinked-7:hover:before {
  transform: translateX(0);
}
.amazing-kusinked-7:hover:after {
  width: calc(100% - 24px);
}
.amazing-kusinked-8 {
  display: inline-flex;
  overflow: hidden;
}
.amazing-kusinked-8:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #492059;
  transform: translateY(-100%);
}
.amazing-kusinked-8:after {
  content: attr(data-content);
  top: 0;
  left: 0;
  height: 0;
  margin: 12px;
  color: #492059;
  white-space: nowrap;
  overflow: hidden;
  transition: height .5s ease;
}
.amazing-kusinked-8 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #9556ae;
}
.amazing-kusinked-8:hover:before {
  transform: translateY(0);
}
.amazing-kusinked-8:hover:after {
  height: calc(100% - 24px);
}

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

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

Если вы сейчас думаете, каковы эти эффекты при наведении, посмотрите предварительный просмотр ниже. Где все восемь промеров показаны, но также можете перейти на demo страницу, где реально попробовать в работе.

Предварительный просмотр 8 различных типов эффектов наведения

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

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

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

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

СКАЧАТЬ

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

Kosten

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