LIVECHAT!

  • Project Manager

    Aris G   :

  • Programmer

    Banir    :

  • Designer

    Suryati :

    Erna      :

ADDRESS

  • PT. Proweb Indonesia
    Kompleks Duta Merlin No F4
    Jl. Gadjah Mada 3-5
    Jakarta Pusat
    Phone : 021-70009976

    021-99890393
    0812-8062772

    Fax : 021-6335765

    Web : www.proweb.co.id

Membuat button gradasi dengan css

 

  1. 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
  2. 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.
  3. 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