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
June 22, 2010
Posted by: Fauzie


Dalam artikel sebelum ini saya telah menunjukkan cara membuat butang hebat dengan menggunakan "pure CSS codes" tanpa menggunakan sebarang ini.

Untuk tutorial selanjutnya jom kita belajar buat satu lagi jenis butang dengan hanya menggunakan kod CSS3 sahaja.

Butang yang akan kita pelajari ini juga tidak kurang hebatnya dengan contoh butang yang ditunjukkan sebelum ini.

Jom lihat "live demo" butang di bawah ini. Ia lebih bersifat berkilat dan bercahaya (glare). Ini dapat dilakukan dengan menggunakan "gradient".

"Live Demo"

Butang CSS3

Tanpa image


Di bawah ini ditunjukkan kod-kod CSS dan HTML. Jika anda hendak mencuba, sila copy & paste semua kod-kod ini ke dalam Notepad dan save dengan extension .html dibelakan nama fail (contoh: butang.html).

Jika anda ingin gunakan dalam blog, copy & paste kod-kod berwarna maroon ke dalam bahagian Design-> Edit HTML dan paste di bahagian atas:

]]></b:skin>
</head>
<body>

Dan copy & paste kod-kod berwarna biru ke bahagian edit post iaitu dalam mode Edit Html (bukan dalam mode compose)


<html>
<head>
<style type="text/css">
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
margin: 1em 0 2em;
position: relative;

/* Label */
font-family: Lucida Sans, Helvetica, Verdana, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.button:hover {
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}

.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}

.orange{
background-color: #ee5526;
background-image: -webkit-gradient(linear, 0% 0%, 0% 85%, from(rgba(246, 132, 36, 0.8)), to(rgb(239, 97, 49)));
border-top-color: #f7a250;
border-right-color: #f7a050;
border-bottom-color: #ef925e;
border-left-color: #f6a460;
-webkit-box-shadow: rgba(237, 96, 46, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(237, 96, 46, 0.5) 0px 10px 16px;
}
</style>
</head>
<body>

<div class="button aqua">
<div class="glare"></div>
CSS3 Button
</div>
<div class="button orange">
<div class="glare"></div>
No Images!
</div>
</div>
</body>
</html>