Cara Memberikan Efek Pada Teks Saat di Hover
Hover yaitu proses ketika kamu mengarahkan kursor kepada link di halaman Web. Ini sama seperti ketika bos kamu menunujuk diantara karyawan di tempat kerja kamu, tapi tak seluruh sama. Pada kebanyakan kasus, kursor akan berubah dari pointer ke tangan kecil ketika di arahakan di link. pengembang situs pun dapat menggunakan cascading style sheets (CSS) bagi mengubah warna dan gaya link ketika pengguna mengarahkan kursornya. Di panduan kali ini saya akan membahas Cara Memberikan Efek Pada Teks Saat di Hover.
Seketika saja saya akan mencoba memberikan strategi Cara Memberikan Efek Pada Teks Saat di Hover:
– Pertama-tama 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 bagi menyimpannya.
– Kedua, teman-teman ketikan kode css3 di bawah ini:
a{
color: white;
text-decoration:none;
text-align: center;
display:block; /* urgen! karena bagi mengatur posis pertam dan kedua supaya yg kedua berada di bawah text yang pertama-tama*/
}
.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 mesti ditentukan. overflow mesti disembunyikan
sehingga teman-teman tak dapat melihat tombol 'Kedua Teks' (lihat html).
Garis ketinggian font (4em) berpusat teks secara vertikal di tombol,
tapi ini mungkin berubah tergantung di ketinggian.*/
.biru-btn:hover{
background-color:#1abc9c;/*bagi merubah warna latar di tombol*/
}
.biru-btn a:hover{
text-decoration: none;/*bagi merubah menghilangkan garis bawah di text dikala di hover*/
}
.link-pertama{
margin-top: 0em;
}
/*pergantian posisi di tombol*/
.biru-btn:hover .link-pertama{
margin-top: -4em;
}Bagi penjelasan kode CSS3 nya saya telah kasih commenting di kode di atas. jangan lupa save dengan nama style.css
– Ketiga coba teman-teman jalankan di browser teman-teman, karenanya apabila teman-teman arahkan kursor di buttonnya efek hover akan berfungsi.
Bagaimana teman-teman lumayan mudahkan Memberikan Efek Pada Teks Saat di Hover. Jangan lupa bagi di coba yah.
Demikian panduan kali ini mengenai bagaimana Cara Memberikan Efek Pada Teks Saat di Hover. Hingga bertemu kembali di panduan berikutnya.
Sumber https://kursuswebsite.org
