Articles

Our Services

Membuat button gradasi dengan css

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">

</style>
</head>

<body>
<div id="button"><a href="/search/">Search</a></div>
</body>
</html>