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 1
October 11, 2010
Posted by: Fauzie


Sebelum ini saya ada tunjukkan bagaimana membuat beberapa jenis butang atau button dengan CSS3 iaitu tanpa menggunakan image.
Untuk tutorial kali ini saya ingin tunjuk tiga lagi contoh butang atau button yang dibina menggunakan CSS3 dan juga "webkit transition properties." Sama seperti sebelum ini, contoh-contoh yang ditunjukkan ini hanya sesuai dengan browser moden: Safari, Chrome dan Firefox.

Contoh pertama ialah apa yang dipanggil "fancy button". Tiada apa-apa keistimewaan pada gelaran ini melainkan atas sebab-sebab berikut:

  1. Ia dibina sepenuhnya dengan CSS3 (pure CSS3, iaitu tanpa image
  2. "Scalable" dimana saiz butang bertukar mengikut saiz font
  3. Warna butang boleh ditukar dengan hanya menukar kod warna pada tag "background- color
  4. Compatible dengan IE7 dan IE8


Di bawah ini ialah contoh "Live Demo" untuk butang atau button ini. Sila perhatikan ia mempunyai elemen-elemen "gloss" (sinar), "drop shadow" dan "3D effects". Elemen "gloss" diperolehi dengan property "gradient" dan drop shadow dibuat dengan property "shadow".

"Live Demo"

Archives





Kod-kod mark-up (html) dan CSS adalah seperti berikut:

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

a.fancy_button, button.fancy_button {
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
float: left;
padding: 4px;
text-decoration: none;
outline: 0;
border-width: 1px;
border-style: solid;
width: auto;
overflow: visible;
border-color: transparent transparent #666 transparent;
border-color: transparent transparent rgba(202,202,202,0.27) transparent;
-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
-webkit-background-clip: padding-box;

}

a.fancy_button span, button.fancy_button span {
display: block;
float: left;
letter-spacing: -1px;
border-width: 1px;
border-style: solid;
border-color: #ccc #444 #111 #444;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7) rgba

(0,0,0,0.5);
font: bold 21px/1em Arial;
color: white;
padding: 0.48em 2em;
cursor: pointer;
text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
-webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba

(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
background: transparent -webkit-gradient(linear, left top, left bottom,

from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-

stop(0.5, rgba(255,255,255,0.01)), to(transparent));
background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6),

rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorstr='#80FFFFFF', EndColorstr='#00FFFFFF');
-webkit-background-clip: padding-box;
}

a.fancy_button:hover span, button.fancy_button:hover span {
border-top-color: rgba(255,255,255,0.65);
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5,

rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20)));
background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba

(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#99dcdcdc', EndColorStr='#33000000');
-webkit-background-clip: padding-box;

}

a.fancy_button:active span, button.fancy_button:active span {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
background: -webkit-gradient(linear, left top, left bottom, from(rgba

(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5,

rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5)));
background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba

(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#80969696', EndColorStr='#59000000');
-webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px

0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75)

0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75)

0px 0px 3px;
-webkit-background-clip: padding-box;

}

a.fancy_button span:active, button.fancy_button span:active {
border-top-color: rgba(255,255,255,0.2);
border-left-color: rgba(0,0,0,0.4);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

StartColorStr='#80969696', EndColorStr='#59000000');
-webkit-background-clip: padding-box;
}
</style/
</head>
<body>

<a class="fancy_button" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&amp;postID=3680206319345194756#"><span

style="background-color:#070;">Archives</span></a>
</body>
</html>


Anda boleh mencubanya dengan copy & paste kod-kod di atas kedalam Notepad.

Kembali kepada | Archives →

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