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



"FANCY BUTTON" DENGAN CSS3: CONTOH 2
October 22, 2010
Posted by: Fauzie


Contoh kedua "fancy button" ini menggunakan elemen-elemen dan properties yang sama seperti contoh pertama.
Apa yang membezakan ialah, dalam contoh kedua ini "icon" telah digunakan untuk mencantikkan lagi butang atau button tersebut.

Saya akan tunjukkan dua jenis butang dalam contoh ini--butang mempunyai icon dan butang biasa. Di bawah ini ialah "Live Demo" bagi butang-butang tersebut.

"Live Demo"



Kod mark-up dan CSS seperti berikut akan memberi anda butang atau button tanpa "icon" atau dengan kata lain butang biasa (regular button).

<html>
<head>
<style type="text/css">

a.buttonfancy {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;

padding: 5px 15px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 24px;
font-size: 20px;
font-weight: bold;
}

a.buttonfancy:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
text-decoration:none;
}

a.buttonfancy:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}

</style>
</head>
<body>
<p class="buttonfancy"><a class="buttonfancy" href="#"><span>Butang Tanpa Icon</span></a></p>
</body>
</html>


Kod berwarna maroon ialah kod html atau "mark-up code" dan kod berwarna biru pula adalah cod CSS.

Untuk membuat butang dengan icon, anda hanya perlu tambah kod CSS berikut di bahagian atas kod </style>:

a.buttonfancy.icon {
padding-left: 11px;
}

a.buttonfancy.icon span{
padding-left: 36px;
background: url('http://images1.artua.com/icons/download-mac.jpg ') no-repeat;
}


'http://images1.artua.com/icons/download-mac.jpg '; merupakan url icon yang digunakan.

Selepas menambah kod CSS baru, sila tukar kod mark-up atau kod html kepada kod seperti ini:

<p class="buttonfancy"><a class="buttonfancy icon" href="#"><span>Butang Dengan Icon</span></a></p>


Untuk mencubanya, cara yang paling mudah ialah copy & paste semua kod CSS dan HTML DI atas dari <html> hingga </html> ke dalam Notepad dan save fail dengan menggunakan extension .html (contoh: butangfancy.html)kemudian buka browser (Safari, Chrome atau Firefox, klik File-> klik Open File dan klik nama fail yang anda save.

Nota: Prosedur ini adalah cara yang paling mudah untuk anda melihat apa yang anda buat menjadi atau tidak dalam browser.

Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: