Membuat Tombol Demo dan Download Valid HTML5

Banyak tutorial cara membuat tombol " Demo " dan " Download " yang sudah sahabat lain bagikan, kali ini saya akan mem...

Membuat Tombol Demo dan Download Valid HTML5

Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini yang pastinya keren dengan warna yang cerah. Tombol ini juga sudah saya sempurnakan menjadi valid HTML5.

Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.
Untuk Demonya, nanti akan seperti ini :
Cara membuatnya :

Tambahkan kode di bawah ini di atas ]]></b:skin> atau </style>
/*Download Demo Button*/
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo {opacity:1;padding:7px 14px!important;background:#E55E48;color:#fff!important;font-weight:400;font-size:14px;font-family:&#39;Oswald&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#5FAAE3;color:#fff!important;font-weight:400;font-size:14px;font-family:&#39;Oswald&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.4s ease-in-out;}
.demo:hover {background:#d97060;transition:all .4s ease-in-out;}
.download:hover {background:#9dadc1;transition:all .4s ease-in-out;}
.demo:active {cursor:pointer;background:#9dadc1;transition:all .4s ease-in-out;}
.download:active {cursor:pointer;background:#d97060;transition:all .4s ease-in-out;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;vertical-align:top;margin-right:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}

Untuk penggunaannya, copy code berikut di postingan pada mode HTML
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Url yang Dituju" target="_blank" title="Demo">Demo</a></li>
<li><a class="download" href="Url yang Dituju" target="_blank" title="Download">Download</a></li>
</ul>
</div>

Selain itu, tombol ini dilengkapi dengan Font Awesome yang menjadikanya lebih keren dan tak kalah juga tombol tersebut juga Responsive. Bagi anda yang suka dengan tombol tersebut silahkan dicoba.

Comments

UsersCloud Free Unlimited Cloud Storage, host your files secure.
Name

Blog CSS3 HTML5 SEO Tips & Trick Widget
false
ltr
item
Bagi Secret: Membuat Tombol Demo dan Download Valid HTML5
Membuat Tombol Demo dan Download Valid HTML5
http://4.bp.blogspot.com/-4nn2lVR-92Y/VQ51YXKw5JI/AAAAAAAAACQ/9dn3lE7tcdw/s1600/Tombol%2BDemo%2Bdan%2BDownload%2BValid%2BHTML5.jpg
http://4.bp.blogspot.com/-4nn2lVR-92Y/VQ51YXKw5JI/AAAAAAAAACQ/9dn3lE7tcdw/s72-c/Tombol%2BDemo%2Bdan%2BDownload%2BValid%2BHTML5.jpg
Bagi Secret
http://bagisecret.blogspot.com/2015/03/membuat-tombol-demo-dan-download.html
http://bagisecret.blogspot.com/
http://bagisecret.blogspot.com/
http://bagisecret.blogspot.com/2015/03/membuat-tombol-demo-dan-download.html
true
3427754455455898956
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy