Flat UI Download Button Awesome

Layaknya multiple button download CSS3 yang saya share pada artikel sebelumnya dengan memanfaatkan font awesome icon untuk mempercantik tampilan. Menerapkan pseudo element dengan CSS value content sebuah icon awesome untuk membuat sebuah tombol button download yang lebih modern dan menarik seperti Flat Menu UI Efek Flip CSS3. Dan tentunya juga akan terlihat lebih bergaya dengan konsep metro ui style dalam sebuah Flat Template Portfolio Design

DEMO
VIEW CODE

Untuk konsep pembuatannya sederhana sekali dan berikut komponennya :

CSS

.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-red a:hover{
background:#2c3e50
}

HTML

<div class="vn-red" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>

Untuk pilihan warnanya silakan lihat View Code dan sesuaikan dengan selera anda

SOURCE

 

Om nanti itu kode di taro di mana ?

 

Kode CSS dimasukkan sebelum kode ]]></b:skin>
kemudian untuk memasukkan ke dalam postingan misalnya, pilih mode HTML dan copas kodenya

 

Keren emang... saya udah pasang ini di blog saya tapi dengan ikon yang lain

 

wah mantap banget nih tombol flatnya, cocok banget untuk blog Download

 

sangat cocok bagi anda yang memiliki situs download dengan menggunakan tombol download murni dari css dan html, sangat ringan loadnya.