Belajar CSS Part 4: Cara Mengatur Hyperlink dengan CSS


Belajar CSS Part 4: Cara Mengatur Hyperlink dengan CSS 1

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-5 dalam sesi belajar CSS. Sebelumnya kita pernah membahas Cara Mengatur Margin dan Padding pada CSS. Pada pertemuan yang ke-5 saya akan mengulas Cara Mengatur Hyperlink dengan CSS.

Hyperlink merupakan link aktif yang dibuat untuk mengalihkan ke halaman lain saat di klik. Hyperlink dibuat menggunakan tag pembuka <a> dan tag penutup </a> di HTML.

Untuk mempercantik atau mengubah hyperlink dengan CSS caranya sangat mudah, nanti akan kita pelajari setelah ini. Disini kita akan membahas bagaimana cara merubah warna pada hyperlink, mengubah link bentuk tombol dan membuat tampilan link berubah saat di klik.

Hyperlink html memiliki 4 status yang bisa dimanipulasi menggunakan CSS, yaitu:

  • link : Merupakan link biasa.
  • visited : Status link yang telah dikunjungi.
  • hover : Status link saat cursor diletakkan di atasnya.
  • active : Status hyperlink saat link sudah di klik.

Untuk pemanggilan hyperlink berdasarkan statusnya bisa ditulis dengan syntax:

  • a:link : Merupakan link biasa.
  • a:visited : Status link yang telah dikunjungi.
  • a:hover : Status link saat cursor diletakkan di atasnya.
  • a:active : Status hyperlink saat link sudah di klik.

Berikut contoh untuk mengatur hyperlink dengan CSS.

index.html

style.css

Hasilnya…

Cara mengatur hyperlink dengan CSS - #IRVANGEN
Cara mengatur hyperlink dengan CSS – #IRVANGEN

Saat cursor diletakkan pada link

Cursor mouse diletakkan pada link - #IRVANGEN
Cursor mouse diletakkan pada link – #IRVANGEN

Kita sudah pernah belajar Padding dan Margin, kali ini kita akan coba terapkan padding dengan hyperlink. Berikut contoh design hyperlink dengan css.

index.html

style.css

Hasilnya.

Desain hyperlink dengan CSS - #IRVANGEN
Desain hyperlink dengan CSS – #IRVANGEN

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Mengatur Hyperlink dengan CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search:

  • cara membuat link di css
  • membuat link dengan css
  • cara merubah warna link di html
  • style pada hyperlink
  • merubah warna link css
  • Cara membuat link dengan css
  • cara membuat hyperlink di css
  • Cara merubah warna link di
  • css mengedit link menjadi tombol
  • cara merubah warna link html
  • tutorial membuat tombol download

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *