Sample:



Kode CSS:
div {
    margin: 20px auto;
    text-align: center;
}

button {
    cursor: pointer;
    background: #e44d26;
    background:    -moz-linear-gradient(top, #f16529 50%, #e44d26 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f16529), color-stop(50%, #e44d26));
    background: -webkit-linear-gradient(top, #f16529 50%, #e44d26 50%);
    background:      -o-linear-gradient(top, #f16529 50%, #e44d26 50%);
    background:     -ms-linear-gradient(top, #f16529 50%, #e44d26 50%);
    background:         linear-gradient(top, #f16529 50%, #e44d26 50%);
    /*display: block;*/
    /*margin: 40px auto;*/
    border: 6px solid #e44d26;
    /*padding: 8px;
    width: 260px;*/
    padding: 8px 15px;
    color: #fff;
    font-family: "Istok Web", sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    -webkit-border-radius:  2px;
    -moz-border-radius:     2px;
    border-radius:          2px;
    -moz-box-shadow:        1px 2px 1px rgba(0, 0, 0, .2);
    -webkit-box-shadow:     1px 2px 1px rgba(0, 0, 0, .2);
    box-shadow:             1px 2px 1px rgba(0, 0, 0, .2);
    -moz-transition:        all 0.1s ease-out;
    -o-transition:          all 0.1s ease-out;
    -webkit-transition:     all 0.1s ease-out;
    transition:             all 0.1s ease-out;
}

button:hover,
button:focus {
    background:    -moz-linear-gradient(top, #f16529 50%, #f16529 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f16529), color-stop(50%, #f16529));
    background: -webkit-linear-gradient(top, #f16529 50%, #f16529 50%);
    background:      -o-linear-gradient(top, #f16529 50%, #f16529 50%);
    background:     -ms-linear-gradient(top, #f16529 50%, #f16529 50%);
    background:         linear-gradient(top, #f16529 50%, #f16529 50%);
    -moz-box-shadow:        0 0 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow:     0 0 5px rgba(0, 0, 0, .5);
    box-shadow:             0 0 5px rgba(0, 0, 0, .5);
}
Kode HTML:
<div>
    <button>Button</button>
</div>

48 comments

19 Februari 2012 16.50

Keren sob. Pasti manfaat untuk teman-teman yang membutuhkan.

19 Februari 2012 17.12

@Suhendri Mrsip :)

19 Februari 2012 18.11

sip, sip, bisa buat bahan

19 Februari 2012 18.34

@MUBAROK :L

19 Februari 2012 19.11

nice info n entry :)

19 Februari 2012 19.16

@scha_07thanks

19 Februari 2012 19.18

nice :)

19 Februari 2012 19.20

@fyzaishakthanks guys

19 Februari 2012 19.36

nice...

19 Februari 2012 19.40

@EiFa:)

19 Februari 2012 19.46

apa beza html & html5?

19 Februari 2012 19.49

@Mdsaf KyoHTML ituu kode bantuu..
HTML5 itu bagian dari HTML

19 Februari 2012 20.03

keren buttonnya, makasih udah share button keren

19 Februari 2012 20.04

smart . .

19 Februari 2012 20.07

@Tutorial Blogiya..
makasih juga udah share menu contact+

19 Februari 2012 20.09

@Mr. Sepetthx

19 Februari 2012 22.32

sip bagus :)

19 Februari 2012 23.08

Maksudnya gmana ?

20 Februari 2012 01.33

@Doodeyzthx

20 Februari 2012 01.33

@Yandi D'Ice BoomberZmasa g tau sih..
maksudnya tombolnya itu mirip logo html5

20 Februari 2012 01.57

gimana gan cara masangnya?

20 Februari 2012 01.58

keren yah , pake backgrpind linear ^_^

20 Februari 2012 02.00

@Mbah Qopetga keren keren juga dehh

20 Februari 2012 02.01

@Seseorang...kode css.nya pasang diatas ]]>
kode html.nya terserah pasang dimana. bisa di postingan . bisa jga di HTML/Javascript

20 Februari 2012 02.09

@Simple Semua

kode ]]> ada banyak mohon lebih lengkap ^_^

20 Februari 2012 02.21

@Seseorang...tuh ada di EDIT HTML kode ]]>

20 Februari 2012 02.22

@Seseorang... yg b skin

20 Februari 2012 02.30

@Simple Semua

Sip gan thanks Rate5 dah....

20 Februari 2012 02.51

@Seseorang...ok

20 Februari 2012 04.11

kren gan bisa di ctrl+D dulu nih siapa tau tar butuh betul gak,,??
wkwkwk happy blogging gan

20 Februari 2012 04.45

@Rizky Wardiansyahctrk+D aja..

20 Februari 2012 16.23

wau simple banget gan, mantep

20 Februari 2012 17.50

@wahid sahiduthx gan

21 Februari 2012 01.59

wow.. simple bgt tuh kode panggilnya.. :))

kak, boleh request??
kalo boleh, share donk caranya buat Older Post - Newer Post kayak blogya kakak ini.. :))
Thanks b4.. :))))

21 Februari 2012 02.11

@Alam Perwirasip

21 Februari 2012 03.36

wah ohsem tutorial :)

21 Februari 2012 03.53

@KyLe Al-Yamaniiya

21 Februari 2012 04.06

Mntap kang, lanjutkan

21 Februari 2012 04.08

wuuuus , buagus gan blog nya ,.,.,...,.

21 Februari 2012 04.13

@Bayujati Prakososip

21 Februari 2012 04.14

@Ehwan Gaulthx yaa sob

21 Februari 2012 04.27

keren mas

21 Februari 2012 04.35

@ADA BLOGsip

21 Februari 2012 20.27

jadi pengen blajar nih gan... ajarin donk....

21 Februari 2012 20.29

@Fendi Kurniawanbolehh

22 Februari 2012 00.00

Makin mantap aja nih blog aja! Salam sukses deh... :D

#Salutt..

22 Februari 2012 00.15

@Harrys lalathx gann

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar