kukuhcdh

CSS3 | Create Beautiful Button

Kali ini, saya akan membagi artikel mengenai CSS3 lagi. Ya dikarenakan kurang adanya inspirasi baru, sehingga saya mohon artikel ini diterima sajalah..
CSS3 adalah salah satu bentuk CSS yang paling baru saat ini yang mana sangat banyak rahasia rahasia CSS3 yang belum kita ketahui. Nah, disini saya akan berusaha untuk membongkar semua rahasia itu, yang tentu saja bertahap.
Oke, Sebagai contoh, coba lihat gambar berikut
Nah, yang saya lingkari itulah yang saya sebut sebagai Beautiful Button dengan menggunakan CSS3.
Mau membuatnya? Silahkan ikuti langkah di bawah ini:
1. Login ke blog anda --> Design --> Edit HTML
2. Masukkan kode CSS ini di atas kode ]]></b:skin>.
 .button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

***NOTE: 
Anda bisa mengedit kode CSS di atas sesuai dengan kemauan anda jikalau memang anda mengerti CSS.
Dan untuk kode HTMLnya
orange:hover ==> Apa yang terjadi jika pointer didekatkan
orange:active ==> Apa yang Terjadi jika diklik
3. Nah, sekarang beralih untuk membuat HTMLnya.. Berikut adalah tata caranya

<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>
<a href="#" class="button orange">Button</a>
*Silahkan ganti tanda '#' dengan url... dan 'Button' dengan Titlenya...
4. Save
5. Untuk demo, silahkan lihat link di bawah ini.
Kukuhcdh | Demo | CSS3 | Create Beautiful Button
Nah, sekarang silahkan beri komentar dan like serta sharenya :)...



Artikel Terkait:

15 Comments:

Muhammad Chandra | 06 December, 2010 20:35 | [Reply]

wah , setelah melihat demo nya , saya langsung tertarik utk mencoba nya sob...

tapi kode nya saya simpan dulu deh , soalnya lagi malas nih otak-atik template , hehehe

Kukuh Cakra D | 06 December, 2010 21:06 | [Reply]

@Muhammad Chandra monggo mas.. terima kasih komentarnya :)

Nyom" Anak Kerissena | 06 December, 2010 22:19 | [Reply]

gan..,
carax buat link Exchange Gmna..?
please tell me..,

Entis Sutisna | 07 December, 2010 07:39 | [Reply]

saya simpan ya ga...???
tapi saya mau tanya...
kan saya dah pasang menu sebelumnya,apa harus di hapus dulu kode2 yang sebelumnya saya pasang itu..//

Unknown | 07 December, 2010 09:39 | [Reply]

wah sekarang uda jaman CSS yach sob,,, lebih simple dari pada html...

Kukuh Cakra D | 07 December, 2010 16:57 | [Reply]

@nyoman: buat apaan mas?
@entis: tergantung mas, sampean mau masang dimana, kalo di menubar lebih baik dihapus saja, karena bisa membuat blog berat walau CSS itu ringan.
@Asis: iya mas, balik ke jaman dulu lagi tanpa flash..

Iwona | 07 December, 2010 17:02 | [Reply]

Thx our friend, for ur kind visit.This is a great pleasure for us to visit u and ur Blog.
Be always happy and don't forget about us.Thanks again.
http://fonts-guru.blogspot.com

Neha | 07 December, 2010 20:17 | [Reply]

Pretty Interesting post. Couldn't be written any better. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this post to him. Pretty sure he will have a good read. Thanks for sharing!Online Medical Transcription

Iwona | 08 December, 2010 00:58 | [Reply]

Friendship... simple word.
But in him hidden
whole the meaning of life.
Our Friend ..Thnx for your visit.
Come back to us always.

aresta | 08 December, 2010 09:45 | [Reply]

thank's sob atas infonya.. tapi sekrang lagi malas utak atik template saya...

Kukuh Cakra D | 08 December, 2010 18:40 | [Reply]

@aresta yasudahlah, terimakasih mas..

SyahidaComputer | 10 December, 2010 13:34 | [Reply]

tips yang menarik ... jadi pengin lebih mendalam tentang css3

Kukuh Cakra D | 10 December, 2010 16:45 | [Reply]

@SyahidaComputer silahkan mas.. cek terus disini ahahah...

yansen | 11 December, 2010 14:49 | [Reply]

artikel yang bermanfaat, terima kasih teman ilmu saya bertambah lagi :)

Kukuh Cakra D | 11 December, 2010 21:24 | [Reply]

@Yan D. Sasongko makasih mas. sama sama :)

Post a Comment | Classic Comment's Form