26 Mayıs 2013 Pazar

Linklere Efekt Verme

Herkese günaydıın :3
Şimdi size linklere verilebilecek güzel bir efekt öğreteceğim...
Bunun gibi:
 Örnek Bir Link... :3
Ayrıca siz kendinize göre aşağıdan renk seçebilirsiniz...

Ctrl+F yardımıyla ]]></b:skin> kodunu bulup üzerine aşağıdakilerden istediğinizi yapıştırın:
Yeşil:
.smooth,a.smooth {
background: #fff;
width: 100px;
color: #24F8FF;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #C7F5DD;
-webkit-transition: 1s;
color: #fff;
}
Kırmızı:
.smooth,a.smooth {
background: #fff;
width: 100px;
color: #FF6BAE;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #FFC2F7;
-webkit-transition: 1s;
color: #fff;
}
Lila:
  .smooth,a.smooth {
background: #fff;
width: 100px;
color: #C27ABB;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #C27ABB;
-webkit-transition: 1s;
color: #fff;
}
Mavi:
 .smooth,a.smooth {
background: #fff;
width: 100px;
color: #93CDEB;
text-align: center;
font-size: 12px;
text-shadow: 1px 2px 3px #ccc;
padding: 3px;
display: block;
-webkit-transition: 1s;
}
.smooth:hover,a.smooth:hover {
box-shadow: inset 190px 0 70px 0 #93CDEB;
-webkit-transition: 1s;
color: #fff;
}
Linki ekleyeceğiniz yere aşağıda ki kodu yazın:
  <a class="smooth" href="LİNKİN URL ADRESİ">LİNK İSMİ</a>
İşte bu kadar...




Hiç yorum yok:

Yorum Gönder

Rainbow