Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BUAT BUTANG ATAU BUTTON DENGAN CSS3
May 31, 2010
Posted by: Fauzie


Satu perkara yang menarik dengan kod CSS ialah anda boleh membuat sesuatu "feature" tanpa menggunakan javascript atau lain-lain script.

Untuk artikel kali ini saya ingin menunjukkan cara membuat "butang" atau "button" dengan hanya menggunakan kod-kod CSS dan HTML.

Saya rasa anda semua telah sedia maklum iaitu butang atau button yang terdapat dapat web site dibuat dengan menggunakan "image" atau dengan kata lain, satu image button perlu di"upload" terlebih dahulu.

Di bawah ini ialah contoh butang yang telah dibuat dengan hanya menggunakan kod-kod CSS dan HTML dan ianya nampak menarik sekali.

"Live Demo"








Di bawah ini adalah kod-kod CSS dan HTML. Kod-kod berwarna maroon ialah kod CSS dan kod-kod berwarna biru pula ialah kod HTML.

<html>
<head>
<style type="text/css">
.awesome, .awesome:visited {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.awesome:hover {
background-color: #111; color: #fff;
}
.awesome:active {
top: 1px;
}
.small.awesome, .small.awesome:visited {
font-size: 11px; padding: ;
}
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.awesome, .large.awesome:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.red.awesome, .red.awesome:visited {
background-color: #e33100;
}
.red.awesome:hover {
background-color: #872300;
}
</style>
</head>
<body>

<div class="column-row">
<div class="five columns">
<button class="large red awesome">Butang Hebat Merah &raquo;</button> <br /><br />
</div>
</div>

</body>
</html>


Jika anda hendak buat butang yang berlainan warna pula (contoh warna hijau), apa yang anda perlu buat ialah tambah kod CSS seperti ini:

.green.awesome, .green.awesome:visited {
background-color: #91bd09;
}
.green.awesome:hover {
background-color: #d45500;
}


di bahagian bawah kod ini (lihat kod-kod di atas):

.red.awesome:hover {
background-color: #872300;
}


Dan kod HTML nya pula adalah seperti berikut:

<div class="column-row">
<div class="five columns">
<button class="large green awesome">Butang Hebat Hijau &raquo;</button><br/><br/> </div>
</div>


Nota: Satu perkara yang harus diperhatikan ialah kod "background-color". Warna merah atau hijau seperti contoh di atas terjadi kerana kod background-color.

Ini ialah contoh kod warna

Hijau: #91bd09
Biru: #2daebf
Merah: #e33100
Magenta: #a9014b
Orange: #ff5c00
Kuning: #ffb515