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 3
October 12, 2010
Posted by: Fauzie


Untuk contoh ketiga "fancy button" ini, saya akan tunjukkan bagaimana menambah "feature" baru ke atas butang atau button ini. Feature yang saya maksudkan ialah property animasi (animation)dengan menggunakan CSS3 "transition property" ke atas image yang akan digunakan sebagai "background image" untuk sebuah butang atau button.


"Live Demo" di bawah ini ialah contoh butang yang dimaksudkan. Sila "hover" mouse di atas butang dan anda akan dapati "background image" butang akan bergerak ke atas dan ke bawah. Seperti contoh-contoh lain dalam blog ini, butang yang dibina ini hanya sesuai dilihat dengan browser Safari, Chrome dan Firefox dan browser yang paling sesuai bila kita memperkatakan CSS3 ialah browser Safari.

"Live Demo": Empat "fancy animated button" yang mempunyai 4 saiz yang berbeza.









Sekarang jom kita lihat kod mark-up dan kod CSS untuk mendapatkan contoh butang-butang di atas.


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

.butanganimasi{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('http://cdn.tutorialzine.com/wp-content/uploads/2010/10/bubble_background.jpg');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}

.butanganimasi:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}

.butanganimasi:active{
bottom:-1px;
}

/*** bawah ini ialah saiz untuk 3 butang ***/

.butanganimasi.besar{
font-size:30px;
}
.butanganimasi.sederhana{
font-size:18px;
}
.butanganimasi.kecil{
font-size:13px;
}

/*** cara membulatkan bucu butang ***/

.butanganimasi.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

.blue.butanganimasi{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);

background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.butanganimasi:hover{
background-color:#63c7fe;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);

background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY= '), url('http://t3.gstatic.com/images?q=tbn:ANd9GcRJy544Q3dnnoEjIvX2i_MFxnZaTWV-D40krilexOo5_eigUUw&t=1&usg=__kZwChSz0xyH-Jc3FRpO2I87dEOY='),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

</style>
</head>
<body>
<div id="butanganimasiContainer">

<a href="#" class="butanganimasi besar blue">Butang Besar</a>

<a href="#" class="butanganimasi blue sederhana">Butang Sederhana</a>

<a href="#" class="butanganimasi kecil blue">Butang Kecil</a>

<a href="#" class="butanganimasi kecil blue rounded">Contoh Butang Rounded</a>

</div>
</body>
</html>


Kembali kepada | Archives →

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