Transformarea link-ului doar prin CSS

[ Mesaje noi · Membrii · Regulamentul forumului · RSS ]

Pagina 1 din 1
1

Forum » uCoz system » Alte » Transformarea link-ului doar prin CSS

Muşatinu

Date: Marţi, 2011-05-10, 08:08 | Message # 1

Mesaje: 1801

Awards: 202
« 53 »

Ideia e simpla cand pueti soricelu pe link acesta se schimba (hover)
In CSS puneti stilurile:

Code

.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);
}

Code

Code

</div>

Demo: http://davidwalsh.name/dw-content/cpojer-links.php

Sursa: davidwalsh.name