Hai teman-teman pada kesempatan kali ini saya akan menjelaskan cara mendesain link dengan berbagai cara menggunakan CSS. Nah banyak cara untuk mendesain sebuah link pada website. Bisa merubahnya menjadi sebuah tombol atau text biasa dll. Link dapat di desain menggunakan beberapa property CSS seperti color, font-family, background-image, background-color, text-decoration, dll.

Contoh mendesain link menggunakan property color:

Dengan CSS seperti itu maka text link tersebut berwarna biru muda. Selain itu link bisa didesain secara berbeda, tergantung dari statement link tersebut.

Empat contoh statement link:

  • a:link – link normal yang belum dikunjungi (belum diklik)
  • a:visited – link yang telah dikunjungi (sudah pernah dikunjungi atau sudah pernah diklik)
  • a:hover – link ketika mouse atau kursor berada dilink tersebut
  • a:active – link aktif

Contoh empat statement link:

Aturan penggunaan statement:

Ketika teman-teman menetapkan untuk menggunakan statement tersebut, ada aturan urutan untuk penulisan script tersebut:

  • Ketika teman-teman ingin menggunakan a:hover HARUS SESUDAH a:visited
  • Ketika teman-teman ingin menggunakan a:active HARUS SESUDAH a:hover

Contoh- contoh penggunaan property CSS:

Dekorasi Text (text-decoration):

Property text-decoration biasanya digunakan untuk menghilangkan garis bawah pada link, contoh:

Warna Latar Belakang (background-color):

Property background-color dapat digunakan untuk menentukan warna latar belakang link, agar link terlihat seperti tombol, contoh:

Contoh menggabungkan beberapa property CSS untuk menampilkan link sebagai kotak atau tombol:

Teman-teman dapat mendesain link dengan menggunakan beberapa property dari CSS sesuai kebutuhan. Semoga bermanfaat.