• »
  • Membuat Tombol Demo Dan Download

Membuat Tombol Demo Dan Download

Ariq Ramadhan On Minggu, 02 Februari 2014

Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini admin akan membuat tutorial cara membuat tombol demo dan download ala blog ini.

Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.

Untuk demonya, nantinya seperti ini :


Cara membuatnya :

Tambahkan kode di bawah ini sebelum
Cek kodenya > http://tny.cz/dd3cc7c7 <

/* -- Ariq Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)
Copy paste Kode ini > http://pastebin.com/bexCWs48 < *Maaf di pastebin aja ya kodenya :D*

SUMBER

Leave a Reply

(A-T)RULES :

-DONT SPAM
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

Subscribe to Posts | Subscribe to Comments