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

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

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

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

Это проверка на работоспособность и так реально будет, когда клик наведете.

Эффекты для ссылок

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

В CSS:

Код
.cpojer-links a {  
  display: inline-block;  
  padding: 4px;  
  outline: 0;  
  color: #3a599d;  
  -webkit-transition-duration: 0.25s;  
  -moz-transition-duration: 0.25s;  
  -o-transition-duration: 0.25s;  
  transition-duration: 0.25s;  
  -webkit-transition-property: -webkit-transform;  
  -moz-transition-property: -moz-transform;  
  -o-transition-property: -o-transform;  
  transition-property: transform;  
  -webkit-transform: scale(1) rotate(0);  
  -moz-transform: scale(1) rotate(0);  
  -o-transform: scale(1) rotate(0);  
  transform: scale(1) rotate(0);  
  }  
  .cpojer-links a:hover {  
  background: #3a599d;  
  text-decoration: none;  
  color: #fff;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  -o-border-radius: 4px;  
  border-radius: 4px;  
  -webkit-transform: scale(1.05) rotate(-1deg);  
  -moz-transform: scale(1.05) rotate(-1deg);  
  -o-transform: scale(1.05) rotate(-1deg);  
  transform: scale(1.05) rotate(-1deg);  
  }  
  .cpojer-links a:nth-child(2n):hover {  
  -webkit-transform: scale(1.05) rotate(1deg);  
  -moz-transform: scale(1.05) rotate(1deg);  
  -o-transform: scale(1.05) rotate(1deg);  
  transform: scale(1.05) rotate(1deg);  
  }


Теперь код:

1. Под простую ссылку:

Код
<div class="cpojer-links">Здесь будет ссылка</div>


2. Прописать его под описание на переход.

Код
<div class="cpojer-links"><a href="http://zornet.ru/">Переходим на zornet.ru</a></div>


Как видим не чего сложного нет, поставим в стили и настроив под свой дизайн, вам только останется ставить этот эффект, так где посчитаете нужным.
09 Августа 2017 Просмотров: 1947 Комментариев: (7)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 7
Critic©
Critic© 09 Августа 2017 23:331
0
Эффект очень простой, но мне больше нравится подчеркивание, здесь если его ставить то под темный дизайн. Там под краски все всегда красиво выглядит.
Kosten
Kosten 09 Августа 2017 23:382
0
Про то и написано, что все очень просто, где будет переход, это хоть внутри сайта или на другие ресурсы, то везде будет эффект.
Critic©
Critic© 10 Августа 2017 01:543
0
А можно сделать так, чтоб поставить стили и все ссылки автоматически в эффектами были.
Kosten
Kosten 10 Августа 2017 02:195
0
Не думаю, что так можно сделать, возможно так получиться, что где переходы, а это кнопки или баннеры, там этот эффект будет срабатывать. Видать потому его отдельно сделали, что самому ставить там где нужно.
Critic©
Critic© 10 Августа 2017 01:564
0
Но на тех же подчеркивание, точно не знаю на конструктор подойдет, то нашел на одном сайте, где можно с права сделать появление или слева и по центру будут расходиться.
Kosten
Kosten 10 Августа 2017 02:256
0
Они работают на сайтах uCoz, но не ставил, просто видел на одном ресурсе, что такие эффекты там подключены, точно не скажу, но на сайт заливал такую тему с подчеркиванием или просто демонстрацию смотрел и хотел разместить.
Kosten
Kosten 10 Августа 2017 02:287
0
Если кого вообще это напрягает, говорю о стандартном эффекте, так как он будет на всех ссылках, то в этот статье вы узнаете, как можно запретить стандартный эффект при наведение на ссылку.
Войдите:
avatar