Membuat Tombol Download Dengan CSS3.

[Dah Dilihat Kali]

Pernahkah anda melihat tombol download yang menawan?
untuk membuat tombol tersebut, hanya dibutuhkan bahasa pemrograman CSS saja. bagi yang sudah paham bahasa CSS mungkin enjoy-enjoy saja ya? bisa buat sesuka dia. nah, yang jadi permasalahan, bagi yang belum paham bahasa CSS gimana bikinnya tuh? tenang aja bro, pada postingan kali ini kita ingin membahas sedikit tentang CSS. gimana sih cara buat button download yang menawan? okey, langsung aja jika anda pingin cepat-cepat tau, silahkan simak penjelasan berikut ini.

pertama tama, kita buat terlebih dahulu kode CSS yang akan membentuk button download. kode css yang berhasil kita bikin adalah sperti ini:

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 9.5px 19px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #080808;
background: #080808;
color: #b01eb0;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

Keterangan:
greenyellow: itu merupakan garis atas buttonnya. silahkan ubah warna garis atasnya semau anda.
orange: itu merupakan background buttonnya. silahkan ubah warna backgroundnya semau anda.
yellow: itu merupakan warna text buttonnya. silahkan ubah warnanya sesuka anda.
gold: itu merupakan ukuran textnya. silahkan besar kecilkan semau anda.
chocolate: itu merupakan warna garis atas button ketika di hover (ketika pointer mouse diletakkan di atasnya).
pink: itu merupakan warna background buttonnya ketika dihover.
blue: itu merupakan warna textnya ketika dihover.

lalu bagaimana meletakkan kode tersebut?
gampang saja.

langkah pertama, silahkan pergi ke rancangan > Edit html. jangan lupa centang Expand Template Widget. agar kodenya terbuka semua. selanjutnya, carilah kode ]]>. dan letakkan kode button tadi, tepat diatas kode ]]>

langkah yang kedua, anda tinggal memasangnya saja di postingan yang perlu anda pasang button download.
sisipkanlah kode berikut ini:

<a class="button" href="url anda" target="_blank"><b>download</b></a>

ganti dengan alamat URL anda.

nah, untuk lebih jelasnya, bisa anda lihat tombolnya disini. carilah link yang bertuliskan "download". itulah hasilnya.

semoga bermanfaat...

Tags: Membuat Tombol Download Dengan CSS3 | tombol download yang menawan | button download