KNCI

Cara Mempercantik Link Dengan CSS

Cara Mempercantik Link Dengan CSS - Mungkin sahabat sering melihat tampilan sebuah link berubah warna atau berubah bentuk saat disorot oleh pointer mouse, nah pada kesempatan ini kita akan mencoba Mempercantik Link Dengan memakai kode CSS, dimana sahabat bisa mengatur bentuk atau warna link saat dikunjungi, saat pointer mouse ada diatasnya, dan pada saat diklick secara manual supaya lebih bervariasi.

Nah apabila sahabat tertarik dengan Cara Mempercantik Link Dengan kode CSS silahkan sahabat copy paste kode css dibawah ini berikut dengan contohnya :

1. Link Membesar Saat Disorot oleh pointer mouse
<style type="text/css">
a.sundaboy-com:link {color:#ff0000;}
a.sundaboy-com:visited {color:#DF7401;}
a.sundaboy-com:hover {font-size:150%;}
</style>
<a class="sundaboy-com" href="http://www.sundaboy.com/2012/04/cara-membuat-efek-shadow-pada-kotak.html" target="_blank">Cara Membuat Efek Shadow Pada Kotak</a>

Hasilnya akan tampak seperti dibawah ini :



Cara Membuat Efek Shadow Pada Kotak



2. Link Berubah Warna Saat Disorot
<style type="text/css">
a.sundaboy:link {color:#FF0000;}
a.sundaboy:visited {color:#0000FF;}
a.sundaboy:hover {color:#DF7401;}
</style>
<a class="sundaboy" href="http://www.sundaboy.com/2012/04/cara-membuat-efek-shadow-pada-tulisan.html" target="_blank">Cara Membuat Efek Shadow Pada Tulisan</a>

Hasilnya akan tampak seperti dibawah ini:



Cara Membuat Efek Shadow Pada Tulisan



3. Link Berubah Bentuk Tulisan Saat Disorot
<style type="text/css">
a.sundaboy:link {color:#FF0000;}
a.sundaboy:visited {color:#DF7401;}
a.sundaboy:hover {font-family:weogie;}
</style>
<a class="sundaboy" href="http://www.sundaboy.com/2012/02/kode-warna-html.html" target="_blank">Kode Warna HTML</a>

Hasilnya akan tapak seperti dibawah ini :



Kode Warna HTML



Keterangan :
  • Rubahlah url yang berwarna merah dengan url yang akan digunakan sebagai link.
  • Rubahlah tulisan yang berwarna biru dengan judul link
Nah itulah Cara Mempercantik Link Dengan CSS, semoga bermanfaat, dan selamat berkreasi. saran dan ktitiknya silahkan poskan pada kotak komentar. tengkyu

Subscribe to receive free email updates:

4 Responses to "Cara Mempercantik Link Dengan CSS"

  1. Wih mantab neh post-nya :D salam kenal sob :)

    BalasHapus
  2. jadi gitu ya caranya
    terima kasih sekali, ini benar2 sangat membantu sebab saya sendiri kurang paham dengan coding dan baru belajar ni

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================