Mendesain Link dengan CSS

Pada tutorial kali ini kita akan membahas tentang bagaimana caranya Mendesain Link dengan CSS. Link sendiri merupakan proses menaut dari halaman satu ke halaman lainnya, sebuah link sendiri memiliki nilai default, yakni :

  • Berwarna biru apabila belum pernah dikunjungi. contoh
  • Berwarna merah ketika aktif / pada saat di klik (tahan klik’an anda). contoh
  • Berwarna ungu apabila sudah dikunjungi. contoh

Style tersebut dapat dirubah dengan menggunakan CSS, dimana kita dapat merubah warnya dan memberikan dekorasi terhadap elemen yang dijadikan sebagai hyperlink tersebut. Di bawah ini adalah contoh – contoh yang saya buat dengan berbagai style.

Menghilangkan Garis Bawah (Underscore)

Style garis bawah yang secara default ada pada nilai hypertext, dapat dihilangkan. Dengan properti text-decoration : none;.

Di bawah ini adalah contoh kode sumbernya :

Dan di bawah ini adalah hasilnya :

mendesain link dengan css

Mendesain Link

CSS menyediakan 4 keadaan saat anda ingin mendesain Link yakni…

  1. a:link, keadaan Link normal ketika belum dikunjungi.
  2. a:visited, keadaan Link ketika sudah dikunjungi.
  3. a:hover, keadaan link ketika kursor mouse di arahkan kepadanya.
  4. a:active, keadaan link ketika anda mengklik link tersebut (ketika Link aktif).

Deklarasikan Hover ini setelah pendeklarasian Link dan Visited, karena jika tidak event Hover ini tidak akan bekerja. Sementara itu deklarasikan Active setelah Hover, jadi urutannya Link > Visited > Hover > Actived. Semua hal ini merupakan ketentuan dari CSS agar semuanya dapat bekerja maksimal.

Dan di bawah ini adalah hasil dari kode sumber di atas :

Keadaan Link normal, ketika belum dikunjungi (a:link).

link normal pada css

Keadaan Link ketika mouse diarahkan pada Hypertext, maka akan muncul garis bawah (a:hover):.

link ter hover pada css

Dan perhatikan tulisan yang saya lingkari merah di atas, dimana itu adalah alaman url yang akan dikunjungi.

Keadaan dimana link aktif, ini terjadi ketika link di klik (a:actived).

link aktif pada css

Keadaan dimana link sudah dikunjungi (a:visited).

link yang sudah pernah dikunjungi pada css


Demikian tutorial dari cara Mendesain Link dengan CSS, silahkan kunjungi tutorial lainnya seperti konsep box model pada css, cara mengatur margin pada css, cara mengatur padding pada css.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us