Flat UI Download Button Awesome

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 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
}

HTML

<div class="vn-red" style="text-align: center;">
<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

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku