Cara Memberikan Efek Pada Teks Saat di Hover

Hover adalah proses ketika anda mengarahkan kursor kepada link di halaman Web. Ini sama seperti ketika bos anda menunujuk salah satu karyawan di tempat kerja anda, tapi tidak semua sama. Dalam kebanyakan kasus, kursor akan berubah dari pointer ke tangan kecil ketika di arahakan pada link. pengembang website juga dapat menggunakan cascading style sheets (CSS) untuk mengubah warna dan gaya link ketika pengguna mengarahkan kursornya. Pada tutorial kali ini saya akan membahas Cara Memberikan Efek Pada Teks Saat di Hover.

Langsung saja saya akan mencoba memberikan langkah-langkah Cara Memberikan Efek Pada Teks Saat di Hover:

– Pertama teman-teman buka text editor teman-teman dan ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Text Slide</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="biru-btn">
  <a class="link-pertama" href="">
    Dumet
  </a>
  <a href="">
    School
  </a>
</div>
</body>
</html>

Setelah selesai teman-teman jangan lupa untuk menyimpannya.

– Kedua, teman-teman ketikan kode css3 di bawah ini:

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* penting! karena untuk mengatur posis pertam dan kedua supaya yg kedua berada di bawah text yang pertama*/
}

.biru-btn, .link-pertama{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}


.biru-btn{
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #16a085;
}

/*tinggi dan lebar harus ditentukan. overflow harus disembunyikan 
sehingga teman-teman tidak dapat melihat tombol 'Kedua Teks' (lihat html). 
Garis ketinggian font (4em) berpusat teks secara vertikal di tombol, 
tapi ini mungkin berubah tergantung pada ketinggian.*/

.biru-btn:hover{
   background-color:#1abc9c;/*untuk merubah warna latar pada tombol*/
}

.biru-btn a:hover{
  text-decoration: none;/*untuk merubah menghilangkan garis bawah pada text saat di hover*/
}

.link-pertama{
  margin-top: 0em;   
}

/*pergantian posisi pada tombol*/
.biru-btn:hover .link-pertama{
  margin-top: -4em;
}

Untuk penjelasan kode CSS3 nya saya sudah kasih commenting pada kode di atas. jangan lupa save dengan nama style.css

– Ketiga coba teman-teman jalankan pada browser teman-teman, maka apabila teman-teman arahkan kursor pada buttonnya efek hover akan berfungsi.

Bagaimana teman-teman cukup mudahkan Memberikan Efek Pada Teks Saat di Hover. Jangan lupa untuk di coba yah.

Sekian tutorial kali ini tentang bagaimana Cara Memberikan Efek Pada Teks Saat di Hover. Sampai bertemu kembali di tutorial berikutnya.