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.
Untuk konsep dasarnya sebagai berikut :
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
}
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>
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>
Anda cukup mengganti tanda # dengan URL yang ingin dimasukkan
PENTING...!!!
# Install CSS kodenya sebelum kode :
]]></b:skin>
# Untuk menampilkan button dalam postingan blog cukup masukkan HTMLnya di mode HTML
# Untuk pilihan warnanya silakan klik VIEW CODE
Demikian semoga bermanfaat dan Happy Blogging
Tidak ada komentar:
Posting Komentar