....
Файлы Скрипты и модификации

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

Описание:
Интересный эффект, который происходит с ссылкой, при наведении курсора мыши на ссылку, она анимируется и немного смещается влево или вправо.
Эффект создаётся только средствами CSS!

Установка:
ПУ => Управление дизайном => Таблице стилей (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);  
  }

Там где хотим видеть такую ссылку вставляем:
Код
<div class="cpojer-links"><a href="адрес страницы">тест ссылки</a></div>

Готово!
Источник: Неизвестен
Загрузка данных...
0 комментариев
Материал «Эффект при наведении на ссылку» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Мини-чат
Для добавления необходима авторизация
Наш опрос
Вы к нам еще вернетесь?
436 ответов
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
© 2012-2018 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz