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

4 komentar:

Joy silalahi mengatakan...

contohnya mana gan?
aku mau lihat live ex.

[./Forbiden-403] mengatakan...

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

Alam Perwira mengatakan...

manteebs sob.. :)

[./Forbiden-403] mengatakan...

sip sob .. :D

Posting Komentar