Anda dapat melihatnya pada halaman Contoh.

Yang perlu kita siapkan adalah sebuah image yang bisa dibuat dengan menggunakan Photoshop seperti dibawah ini:

Gambar diatas adalah gambar yang akan kita pergunakan dimana gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian yang ditempati kursor (Over/Rollover), pada contoh ini saya berinama file tersebut dengan nama tombol.gif.

Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:

<a href="#">Tombol</a>

Nah, semudah itu. Sekarang kita buat CSS nya:

a {
display: block;
background: url(tombol.gif) top center;
width: 124px /*Lebar Tombol*/
height: 40px /*Tinggi Tombol*/
text-align: center; /*Supaya Teks Ditengah (vertical)*/
line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/
font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/
color: #fff; /*(Warna Hurus)*/
text-decoration: none; /*Jangan pergunakan garis bawah*/
}

a:hover { /*Posisi kursor diatas tombol*/
background: url(tombol.gif) bottom center;
}

Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Mudah bukan?
http://pupungbp.erastica.com

p {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11pt;
font-style: normal;
}

dapat kita singkat menjadi:

p {
font: normal 11pt Arial, Helvetica, Sans-Serif;
}

CSS Shorthand Property ini dapat kita terapkan pada background, font, margin dan padding, border, dan list.

Background

Pada background, CSS Shorthand Property memiliki sintaks sebagai berikut:

background: background-color | background-image | background-repeat | background-attachment | background-position

contoh:
.elin {
background: #EFEFEF url('images/background.jpg') repeat-x fixed top;
}


Font

Sintaks:
font: font-style | font-variant | font-weight | font-size | line-height | font-family

contoh:
p {
font: bold 11px Arial, Helvetica, Sans-Serif;
}


margin dan padding

Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Contoh:
.left {
margin: 11px 12px 30px 20px;
padding: 11px 12px 30px 20px;
}

Supaya memudahkan mengingat, saya biasa menganalogikannya dengan putaran jarum jam yang selalu dimulai dari jam 12 (top). Untuk margin dan padding, ia memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi:
Sintaks:
Margin: margin-top = margin-right = margin-bottom = margin-left

contoh:
.left {
margin: 15px;
}
berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px.

Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left

contoh:
.left {
margin: 15px 20px;
}
berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px;

Sintaks:
margin: margin-top | margin left = margin right | margin bottom