#CSS - #CSS Dasar

Belajar CSS Part 6 : Mengatur Hyperlink dengan CSS

By Diki Alfarabi Hadi
31 December 2015
CSS CSS Dasar

Belajar CSS Mengatur Hyperlink dengan CSS

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 di kunjungi.
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

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink CSS</title>

</head>

<body>

</body>

</html>

style.css

.link{

font-size: 20pt;

}

.link:hover{

color: red;

}

.link:link{

color: blue;

}

.link:active{

color: green;

}

.link:visited{

background: yellow;

}

mengatur hyperlink dengan css

dan saat cursor di letakkan pada link

saat cursor mouse di letakkan di atas link

design link dengan css

index.html

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink CSS</title>

</head>

<body>

</body>

</html>

style.css

.contoh-link,

.contoh-link:link,

.contoh-link:active,

.contoh-link:visited{

font-size: 20pt;

background: #1ABC9C;

color: #fff;

text-decoration: none;

padding: 10px;

font-family: sans-serif;

}

.contoh-link:hover{

background: #16A085;

}

Tutorial belajar css dasar mengatur hyperlink dengan CSS

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tags: cara mengatur css hyperlink, design link dengan css, hyperlink css, membuat tombol dengan css, tutorial belajar css dasar mengatur hyperlink dengan CSS