Wednesday , December 2 2020
Home » CSS » Membuat Hyperlink Dengan CSS

Membuat Hyperlink Dengan CSS

Membuat Hyperlink Dengan CSS

lebakcyber.net – Membuat hyperlink dengan CSS. Oke jadi pada kesempatan kali ini kita kembali membahas mengenai CSS khususnya mengenai cara membuat hyperlink dengan menggunakan tambahan dari perintah CSS agar link yang kita buat memiliki tampilan yang lebih menarik.

Hyperlink adalah sebuah link yang dibuat agar bisa berpindah halaman pada saat link tersebut di klik. Hyperlink sendiri pada halaman HTML dibuat dengan menggunakan tag <a> dan juga diakhiri dengan tag </a>. Dan sekarang kita akan membahas mengenai mengatur tampilan dari link yang dibuat seperti membuat warna pada link, merubah warna teks link pada saat cursor berada diatasnya dan juga merubah warna link kalau link tersebut telah dikunjungi.

Di CSS sendiri hyperlink pada HTML memiliki empat status dan dapat dimanipulasi menggunakan CSS, contoh seperti berikut :

Advertisements
  • link : Link untuk menuju halaman website tertentu
  • hover : status pada sebuah link saat kursor berada diatas link tersebut
  • active : status pada sebuah link saat link tersebut telah di klik
  • visited : status pada sebuah link yang sudah dikunjungi.

Untuk pemanggilan atau penggunaan link menggunakan CSS berdasarkan statusnya bisa ditulis dengan menggunakan perintah :

  • a:link : Link untuk menuju pada halaman website tertentu
  • a:hoover : status pada sebuah link saat kursor berada diatas link tersebut
  • a:active : status pada sebuah link saat link tersebut sudah di klik
  • a:visited : status pada sebuah link yang sudah dikunjungi

Dan dibawah ini adalah contoh bagaimana mengatur dan mendesain sebuah hyperlink dengan menggunakana CSS, kita buat kembali satu file dengan nama index.html dan sebuah file dengan nama style.css lalu masukan perintah dibawa ini :

Advertisements

style.css

.link,
.link:link,
.link:active,
.link:visited{
    font-size: 10pt;
    color: #fff;	
    background: #1ABC9C;
    padding: 10px;
    font-family: sans-serif;	
}
 
.link:hover{
    background: #33cc33;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Hyperlink Menggunakan CSS - Lebak Cyber</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Contoh link untuk menuju situs lebakcyber.net</p>
    <a class="link" href="https://www.lebakcyber.net">Silahkan klik disini</a>
</body>
</html>

Nanti hasilnya seperti pada gambar dibawah ini :

Tampilan Awal Link Yang Dibuat Menggunakan CSS

 

Membuat Hyperlink Dengan CSS 2
Tampilan Saat Kursor Berada diatas Link

Oke jadi seperti itulah bagaimana cara agar kita dapat mendesain dan memuat link dengan menggunakan CSS, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar CSS lainnya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

merubah list dengan css

Merubah List Dengan CSS

Merubah List Dengan CSS lebakcyber.net – Merubah list dengan CSS. Setelah beberapa postingan sebelumnya yang …

Leave a Reply

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