Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
mengubah warna background link pada saat kondisi hover CSS
dibawah ini adalah script dan gambar tombol link pada saat kondisi biasa(link), yang saya mau tanyakan bagaimana mengubah warna backgroundnya saja pada saat kondisi hover(pointer diatasnya)
#button1{
display: inline-block;
background-color: #027a88;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #f3f3f3 ;
padding:8 18px;
margin-left: 74px;
margin-top: 16px;
}
<a href='https://drive.google.com/file/d/0B72UJmSCwu3PYnF3UHNhYWZPSUE/view?usp=drivesdk'>https://drive.google.com/file/d/0B72UJmSCwu3PYnF3UHNhYWZPSUE/view?usp=drivesdk</a>
7 Jawaban:
sudah coba ini:
#button1:hover {
// silahkan tentukan sendiri warnanya.
background-color: yellow;
}
Terimakasih atas jawabanya, tetapi kenapa pada saat saya menulis kedua kondisi, biasa dan hover
#button1:link{
display: inline-block;
background-color: #027a88;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #f3f3f3 ;
padding:8 18px;
margin-left: 74px;
margin-top: 16px;
}
dan juga
#button1:hover{
background-color : blue;
}
warna fontnya di kondisi biasa malah jadi berubah??
itu bisa disebabkan css bawaan browser. kalau buttonnya menggunakan tag a, biasanya kalau di chrome berubah jadi biru, lain lagi ceritanya kalau di mozila. Kalau mau atur sisa tentukan juga warna hurufnya saat dihover mau apa.
#button1:hover{
background-color : blue;
// itu color sisa rubah warnanya, silahkan ditentukan mau apa warnanya saat di hover
color: red;
}
Tadi saya juga sempet copas semua script dari kondisi link dan saya hanya ubah bagian background-color hovernya saja, tetapi warna pada kondisi link berubah jadi biru, seharusnya sama atau tidak ya?.. Mohon penjelasanya
Jawaban Terpilih
itu diatas sy sudah sertakan code kalau mau rubah warna saat kondisi button di hover. Efek button sebelum dan setelah di hover bisa dirubah2 terserah kemauan anda. Intinya gunakan pseudo-class untuk memainkan stylenya. *pseudo-class itu yg ditandai semicolon dari selector (seperti :hover, :focus, dsb).
Banyak hal yg mempengaruhi css/tampilan baik itu devicenya hingga browsernya. coba pahami contoh ini dan pelajari lebih lanjut: 1. Buat button di html
<button id="button-test">Hover saya</button>
2. Tambhakan style
#button-test {
// disini diatur style tampilan button sebelum diapa2in
color: red;
}
#button-test:hover {
// disini diatur style saat button dihover
color: blue;
}
3. Kalau agan bingung ini, waktunya agan belajar css.
Oke, terimakasih gan jawabanya sangat membantu
jadi penulisan seperti ini salah ya gan
#button1:link{
display: inline-block;
background-color: #027a88;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #f3f3f3 ;
padding:8 18px;
margin-left: 74px;
margin-top: 16px;
}
#button1:hover{
display: inline-block;
background-color: #40a1ac;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #f3f3f3 ;
padding:8 18px;
margin-left: 74px;
margin-top: 16px;
}
yang benar begini ya
#button1{
display: inline-block;
background-color: #027a88;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #f3f3f3 ;
padding:8 18px;
margin-left: 74px;
margin-top: 16px;
}
#button1:hover{
background-color: #40a1ac;
}