Materi 17 : Menghias Link dengan CSS

Menghias Link dengan CSS - Sebelum lanjut ke materi, saya admin dari Web Design Purbalingga mengucapkan Taqabbalallahu Minna Wa Minkum, Selamat Hari Raya Iedul Fitri mohon maaf lahir dan bathin. Baiklah pada artikel kali ini kita akan bersama sama membahas seputar link yang sebelumnya sudah di bahas pada materi tentang html tapi untuk kali ini mungkin lebih kepada bagaimana menghias link itu sendiri.

Menghias Link dengan CSS

Dengan CSS, kita bisa memodifikasi atau menghias link yang sudah dibuat agar tidak terlihat monoton. ada banyak hal yang bisa kita lakukan pada link dengan menggunakan CSS contohnya kita bisa mengubah warna default dari link (biru), memberikan warna pada link saat kursor mengarah ke link tersebut (hover), mengubah warna link ketika link tersebut di klik dan masih banyak lagi.

Nah, berikut ini akan kita ulas bersama tentang apa saja yang bisa kita lakukan pada link ini. Let's Code.

Mengubah Warna

Untuk yang ini cukup dasar, kita cukup menambahkan properti color serta nilainya. Lihat baris kode berikut ini dan coba jalankan di browser.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style type="text/css">
  a {
   color: red;
  }
 </style>
</head>
<body>
 <a href="index.html" target="_blank">Ini link</a>
</body>
</html>

Ketika baris CSS nya di hapus, maka warnanya akan kembali menjadi default yaitu warna biru.

Efek Hover

Warna link akan berubah saat kursor kita arahkan ke link tersebut di namakan efek hover. Lebih jelasnya perhatikan baris kode berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style type="text/css">
  a {
   text-decoration: none;
   color: red;
  }
  a:hover {
   color: green;
  }
 </style>
</head>
<body>
 <a href="index.html" target="_blank">Ini link</a>
</body>
</html>

Dan juga kita tetap bisa memberikan warna default pada link tersebut seperti contoh di atas

Efek Visited

Ketika link telah di klik maka akan meninggalkan warna lain pada text link tersebut dan ini di sebut efek visited.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style type="text/css">
  a: {
   color: red;
  }
  a:hover {
   color: green;
  }
  a:visited {
   color: blue;
  }
 </style>
</head>
<body>
 <a href="index.html" target="_blank">Ini link</a>
</body>
</html>

Menambahkan Border

Kita juga bisa menambahkan border pada link agar terlihat seperti button atau tombol yang bisa di klik.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style type="text/css">
  a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid teal;
    border-radius: 6px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: teal;
    color: white;
}
 </style>
</head>
<body>
 <a href="index.html" target="_blank">Ini link</a>
</body>
</html>

Fungsi dari properti active adalah ketika area yang telah di beri border akan berubah menjadi memiliki seperti background.

Hasilnya

Lain lain

Silahkan pelajari efek lain untuk text link yang kita buat dengan beberapa style berikut ini
Ketikan baris html berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style type="text/css">
 </style>
</head>
<body>
 <p><b><a class="satu" href="index.html" target="_blank">Ini link</a></b></p>
<p><b><a class="dua" href="index.html" target="_blank">Ini link</a></b></p>
<p><b><a class="tiga" href="index.html" target="_blank">Ini link</a></b></p>
<p><b><a class="empat" href="index.html" target="_blank">Ini link</a></b></p>
<p><b><a class="lima" href="index.html" target="_blank">Ini link</a></b></p>
</html>

Lalu tambahkan masing - masing baris css berikut ini secara berurutan di dalam tag style

Efek hover merubah warna text -

a.satu:link {color:red;}
  a.satu:visited {color:#0000ff;}
  a.satu:hover {color:#ffcc00;}

Efek hover merubah ukuran huruf -

a.dua:link {color:red;}
  a.dua:visited {color:#0000ff;}
  a.dua:hover {font-size:150%;}

Efek hover merubah warna latar / background -

a.tiga:link {color:red;}
  a.tiga:visited {color:#0000ff;}
  a.tiga:hover {background:#66ff66;}

Efek hover merubah jenis font -

a.empat:link {color:red;}
  a.empat:visited {color:#0000ff;}
  a.empat:hover {font-family:monospace;}

Efek hover menampilkan garis bawah / text decoration -

a.lima:link {color:red;text-decoration:none;}
  a.lima:visited {color:#0000ff;text-decoration:none;}
  a.lima:hover {text-decoration:underline;}

Sekian materi kali ini tentang Menghias Link dengan CSS dan semoga bermafaat. Sampai jumpa di materi berikutnya dan jika ada materi yang belum di pahami silahkan tinggalkan pertanyaan di kolom komentar.

Web Design Purbalingga