Thursday 7 June 2012

IP.Board Button Style With CSS3

Standard
Untuk Codenya silahkan copas ini code.

.button {
    background: #475F66 url(images/highlight.png) repeat-x 0 0;
    color: white;
    text-decoration: none;
    border-width: 1px;
    border: 0;
    padding: 5px 11px;
    cursor: pointer;
    color: #fff;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
    border: 1px solid #555;
    text-shadow: 0px -1px 0px rgba( 0, 0, 0, 0.3);
    font-family: tahoma;

}

.button:hover {
    background: #a2bfcf url(images/highlight.png) repeat-x 0 0;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #ccc;
    border: 1px solid #6b9aa8;
}

.button:active {

    -webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    -ms-transition: 0s;
    transition: 0s;


    -webkit-transform: scale(1.1);

}
Untuk Code HTMLnya seperti ini.

<a href="#" class="button">Klik Disini</a>

Keterangan Code yaa
class="button" untuk menampilkan tombol pada link tersebut jadi hasilnya akan seperti ini.
   

Untuk Bahannya silahkan download dibawah yaa dan taruh di:
root/images ==>> maka akan secara otomatis terpanggil file images tersebut.

Download Filenya Disini:
https://docs.google.com/open?id=0B4WaeO1FbWBnYlU0UHJiV05rV1U

0 komentar:

Post a Comment