Ефект посилання при наведення для сайту

Ефект посилання при наведення для сайту

За допомогою стилю на сайті, робимо гарний ефект при наведення на посилання, де просто з'явитися відтінок кольору, що самі виставите. Так як в мережі можна знайти різні види в цьому плані, що при наведення з'являється риса з лівого або з правого боку, але під них потрібно ставити багато стилів. Тут можна сказати простий спосіб, який підійде на всі дизайн, так як буде з'являтися гамма кольору або на самому посиланні або на назву, що стоїть під нею.

Ви можете зробити темніше або світліше, так як за замовчуванням йде світло синьої відтінок. Тут тільки залишається саме посилання підключити під клас і вона буде працювати. Цей ефект посилання можна зробити на одній сторінки, і вона буде головна. Все дуже просто регулюється і по установці не складно, так як робиться в ручну під то ключове слова на перехід, яке вам потрібно. Що більше розрахований під гарний ефект, але і відразу видно, що навели клік на перехід

Це перевірка на працездатність і так реально буде, коли клік наведете.

Приступаємо до установки.

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 # 41; rotate (0 # 41 ;;
-moz-transform: scale (1 # 41; rotate (0 # 41 ;;
-o-transform: scale (1 # 41; rotate (0 # 41 ;;
transform: scale (1 # 41; rotate (0 # 41 ;;
>
.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 # 41; rotate (-1deg # 41 ;;
-moz-transform: scale (1.05 # 41; rotate (-1deg # 41 ;;
-o-transform: scale (1.05 # 41; rotate (-1deg # 41 ;;
transform: scale (1.05 # 41; rotate (-1deg # 41 ;;
>
.cpojer-links a: nth-child (2n # 41;: hover <
-webkit-transform: scale (1.05 # 41; rotate (1deg # 41 ;;
-moz-transform: scale (1.05 # 41; rotate (1deg # 41 ;;
-o-transform: scale (1.05 # 41; rotate (1deg # 41 ;;
transform: scale (1.05 # 41; rotate (1deg # 41 ;;
>

1. Під просте посилання:

Схожі статті