Membuat button gradasi dengan css
Artikel Lain
- Memakai judul yang wajar
- Fokus pada produk yang anda kuasai
- Membuat Multilevel Menu Menggunakan CSS
- Htaccess untuk banyak extention
- Membuat button gradasi dengan css
- Membuat layout header - menu kiri - menu kanan - footer dengan css
- Membuat news berjalan dengan mengambil isi database
- Berbagi artikel di Facebook atau Twitter
- Dokumentasi Aplikasi dengan doxygen
- Membuat aplikasi kalender dengan PHP
- Buat terlebih dahulu background gradasi untuk button saat di over dan saat tidak di over di photoshop, misalnya:
image background saat over, kita namakan bg_button_over.gif
image background saat tidak over, kita namakan bg_button.gif - buat css untuk button saat di over
#button a {
margin-top: 12px;
float: left;
height: 23px;
width: 106px;
border: 1px solid #CF6F18;
background-image: url(images/bg_button_over.gif);
font-family: Arial;
font-size: 12px;
line-height: 23px;
font-weight: bold;
color: #000000;
text-align: center;
vertical-align: text-top;
text-decoration: none;
}
masukkan image background yang kita sediakan untuk saat di over ke background-image. - buat css untuk button saat tidak diover
#button a:hover{
background-image: url(images/bg_button.gif);
border: 1px solid #6A9EC3;
}
masukkan image background yang kita sediakan untuk saat tidak di over ke background-image dan ubah warna bordernya jika diperlukan.
Contoh html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#button a {
margin-top: 12px;
float: left;
height: 23px;
width: 106px;
border: 1px solid #CF6F18;
background-image: url(images/bg_button_over.gif);
font-family: Arial;
font-size: 12px;
line-height: 23px;
font-weight: bold;
color: #000000;
text-align: center;
vertical-align: text-top;
text-decoration: none;
}
#button a:hover{
background-image: url(images/bg_button.gif);
border: 1px solid #6A9EC3;
}
-->
</style>
</head>
<body>
<div id="button"><a href="/search/">Search</a></div>
</body>
</html>
Untuk contohnya dapat dilihat di http://www.prowebpro.com/pic/erna/membuat_button_gradasi_dengan_css.php