Hyperlink merupakan link yang dibuat untuk mengalihkan halaman saat di klik. hyperlink atau link dibuat dengan menggunakan tag <a> dan di akhiri dengan tag </a> di HTML.dan untuk mempercantik, mengubah atau mengatur hyperlink dengan css caranya sangat mudah. pada tutorial belajar css mengatur hyperlink dengan css ini akan di jelaskan tentang cara mengatur hyperlink dengan css. mulai dari membuat warna pada link, mengubah link menjadi bentuk tombol, membuat tampilan hyperlink berubah pada saat di klik dan sebagainya.
Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan menggunakan css. yaitu :
- link . merupakan link aktif biasa.
- visited. merupakan status sebuah link yang telah di kunjungi.
- hover. merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
- active. merupakan status sebuah link atau hyperlink pada saat sudah di klik.
untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan syntax:
- a:link = untuk link biasa
- a:visited-merupakan status sebuah link yang telah dikunjungi
- a:hover - merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
- a:active = merupakan status sebuah link atau hyperlink pada saat sudah di klik.
berikut ini adalah contoh mengatur hyperlink dengan css :
Index.html
__________________________________________________________________________
__________________________________________________________________________
Style.css
__________________________________________________________________________
__________________________________________________________________________
Design Link dengan css
Index.html
__________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hyperlink css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="contoh-link" target="_blank"
. href="https://www.belajarngodingg.my.id">Klik di sini</a>
</body>
</html>
__________________________________________________________________________
Style.css
__________________________________________________________________________
.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
font-size: 20pt;
background: #1abc9c;
color: #fff;
padding: 10px;
font-family: Sans-Serif;
}
.contoh-link:hover{
background: #16A085;
}
_______
___________________________________________________________________