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

by Axelvaisper

HTML

<div class="linkz">
<a href="#">Главная Главная Главная</a><br> <br><a href="#">Главная Главная Главная</a><br><br> <a href="#">Главная Главная Главная</a><br><br><a href="#">Главная Главная Главная</a> <br><br><a href="#">Главная Главная Главная</a><br><br> <a href="#">Главная Главная Главная</a>
</div>

CSS

*{background:white;
    padding:13px}

.linkz a {
 text-shadow:0 0 1px blue;
 display: inline-block;
 padding: 4px;
 outline:  0;
 color: rgb(0, 113, 208);
 -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);
 }
 .linkz a:hover {
    box-shadow:0 0 5px black;
    text-shadow:0 0 1px white;
 background: rgb(0, 113, 208);
 text-decoration: none;
 color: #fff;
 -webkit-border-radius: 50em;
 -moz-border-radius: 50em;
 -o-border-radius: 50em;
 border-radius: 50em;
 }
 
.linkz a:nth-child(2n):hover {
    box-shadow:0 0 5px black;
    text-shadow:0 0 1px white;
 background: rgb(0, 113, 208);
 text-decoration: none;
 color: #fff;
 -webkit-border-radius: 50em;
 -moz-border-radius: 50em;
 -o-border-radius: 50em;
 border-radius: 50em;
 }

.linkz a:active {
  color:#000;
  background:yellow;
 -webkit-transform: scale(0.95) rotate(-7deg);
 -moz-transform: scale(0.95) rotate(-7deg);
 -o-transform: scale(0.95) rotate(-7deg);
 transform: scale(0.95) rotate(-7deg);
 }
.linkz a:nth-child(2n):active {
  color:#fff;
  background:violet;
 -webkit-transform: scale(0.95) rotate(7deg);
 -moz-transform: scale(0.95) rotate(7deg);
 -o-transform: scale(0.95) rotate(7deg);
 transform: scale(0.95) rotate(7deg);
 }