CSS3 Media Temple Button

Media Temple Web Hosting

Assalamu'alaikum ..
Kembali Lagi dengan Saya [./Forbiden-403]
Gimana Kabar Kalian Kalian ..
Baik Aja ya ..
sekarang kita mau belajar buat Button Via CSS ..
Langsung aja deh tutorialnya ..
Cekidot ..

1. Login Blog kalian masing2
2. Rancangan --> Edit HTML
3. Cari Kode ]]></b:skin
4. Masukan Kode Ini Di atas Kode tadi

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
5. Simpan Template..
6. cara menampilkan Butonya tinggal kalian masukan Kode di bawah ini Di mana aja, Di postingan, Di Widget, Di mana aja deh ..
<a class="button" href="#">Text Anda</a>

7. Selesai ..
Mau lihat Contohnya ?
Di atas Tu ada ..
Yang Tulisan [./Forbide-403]
untuk Edit terserah kalian , Mau ganti warna, apa mau ngapain, terserah kalian ..


Sekian Tutorial Dari Saya ..
Insyaallah Bermanfaat

5 ... Skip ke Kotak Komentar

16 Januari 2012 14.45

contohnya mana gan?
aku mau lihat live ex.

16 Januari 2012 14.51

Yang Di atas itu ..
Di pembukaan Artikel ..
Kan ada Button warna Biru .. :D

16 Januari 2012 15.11

manteebs sob.. :)

16 Januari 2012 15.19

sip sob .. :D

Anonim
27 Mei 2013 09.19

You aсtually make it seеm ѕo еаsy with your prеsentatіοn but I fіnd this matter to
be actuаlly something thаt I thinκ I woulԁ neνеr understand.
It ѕeems toο сomplex anԁ vегу broad
fοr me. I аm looκing forwагd foг yοur next pοst, Ӏ'll try to get the hang of it!

Feel free to visit my homepage; Captcha Breaker review

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]