Cara membuat tombol download FLAT UI

Hi sobat jumpa lagi bersama saya diblog Mang Tamvan pada kesempatan kali ini saya akan membagikan Cara membuat tombol download nah untuk sobat yang masih kebingungan cara membuatnya, bisa mengikuti langkah-langkah dibawah ini dengan seksama☺


Dan dibawah ini adalah Cara membuat tombol download Flat UI sobat bisa ambil code CSS dibawah ini
Dan terapkan code dibawah ini tepat sebelum </style> atau ]]></b:skin> 

/* CSS Button */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#5EEE66;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}


setelah itu silahkan sobat bisa pasang juga code dibawah ini, jika sudah ada tidak usah dipasang lagi

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Dan sobat bisa menggunakan code untuk dipostingan, bisa ambil dibawah ini

<div class="container">
<h2>
Tombol Demo dan Download</h2>
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="#" target="_blank">Demo Link</a></li>
<li><a class="download" href="#" target="_blank">Download Link</a></li>
</ul>
</div>
</div>
Ok sobat demikianlah dari saya tentang cara membuat tombol download selamat mencoba dan semoga bisa bermanfaat.

Comments

Popular posts from this blog

Cara Ampuh Mengusir Nyamuk Nakal

Kumpulan Kombinasi Keyboard Untuk Pintasan (Shortcut) Yang Wajib Anda Ketahui !

Belanja Gratis Cuma Rp. 0 Via Paypal Dan Mendapatkan Uang Banyak Dengan Mudah