Стилизация обычных ссылок на uCoz

Стилизация обычных ссылок на uCoz
До появления CSS3, не было никакой возможности д и необходимости стилизовать обычные ссылки, разьве что - jQuery.
Сейчас jQuery, потихоньку отходит назад, а все из-за CSS3
И это очень удобно, можете посмотреть сами, на демо ниже
Демо: посмотреть
К тому же, очень простая установка:
Стилизация обычных ссылок на uCoz №1

 

Code

.links a{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #8fc117;
  -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);
  }
.links a:hover {
  background: #8fc117;
  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);
}
.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);
}


Стилизация обычных ссылок на uCoz №2

 

 

Code

.links2 a{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #8fc117;
  -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);
  }
.links2 a:hover {
  background: #8fc117;
  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);
  -moz-transform: scale(1.05) ;
  -o-transform: scale(1.05);
  transform: scale(1.05);
 }


Ну все, приятной установки

 

Чтобы оставить отзыв о шаблоне для uCoz .
Выйти ?

Вы уверены, что хотите выйти?

Нажмите нет, если вы хотите продолжить работу. Нажмите да, если хотите покинуть сайт.