ปุ่มแบบมีรูปภาพ

<style type="text/css">
.toolbar {
     background-image: url(toolbar.png); /* รูปภาพด้านบน */
     background-repeat: no-repeat;
     width: 32px; /* ขนาดของปุ่ม */
     height: 32px; /* ขนาดของปุ่ม */
     float: left;
}
a.1 {
     background-position: 0 0; /* ตำแหน่งรูปของปุ่ม ปกติ แถวบน */
}
a.1:hover {
     background-position: 0 -32px; /* ตำแหน่งรูปของปุ่ม เมื่อเมาส์อยู่บนปุ่ม */
}
a.2 {
     background-position: -32px 0;
}
a.2:hover {
     background-position: -32px -32px;
}
</style>

<a class="toolbar 1" href="xxx.php">&nbsp;</a>
<a class="toolbar 2" href="yyy.php">&nbsp;</a>