CSS3 Media Temple Button

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 masing²
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