Flat UI Button Awesome Modal Dialog

Multi Color Button Awesome Modal Dialog - Makin asyik aja  membuat tampilan blog dengan penuh warna Flat UI yang lebih berani dan ngejreng tentunya juga dikombinasikan dengan font awesome yang lebih simple. Untuk artikel kali masih terkait dengan Simple Flat UI Menu Modal Dialog , Simple Flat Ui Navigasi Menu , dan Flat UI Button Download Awesome yang telah saya share sebelumnya.

• DEMO

Untuk konsep dasarnya seperti dibawah ini :

CSS

<link href='http://googledrive.com/host/0B0QTgfBgnob0Q18zMVAzc0NtcXM' rel='stylesheet'/>

.btn1 {width:30px;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #2980b9; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn1:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn2 {width:30px;
  background: #2ecc71;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #27ae60; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn2:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn3 {width:30px;
  background: #1abc9c;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #16a085; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn3:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn4 {width:30px;
  background: #f39c12;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #e67e22; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn4:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn5 {width:30px;
  background: #e74c3c;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #c0392b; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn5:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}
.vnbtn {max-width: 550px;
min-width: 180px;
  background: #bdc3c7;
  font-family: Arial;
  color: #999;border-left:20px solid #7f8c8d; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.vnbtn:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

JavaScript

Untuk cara pemasangan javascript modalnya bisa dilihat di sini

HTML

<ul>
<li><div class="btn1"><div class="md-modal md-effect-10" id="modal-10">
    <div class="md-content">
        <h3> DOWNLOAD <a class="md-close">&#215;</a></h3>
        <div>Anda bisa mengunduh file ini melalui link direct berikut ini
<br/>
<br/>
 <div class="vnbtn" style="text-align: center">
<a href="#" class="btn-wrap">DOWNLOAD</a>
<br/>
</div>
        </div>
    </div>
</div>
<button class="md-trigger" data-modal="modal-10"><i class="fa fa-download"></i></button>
<div class="md-overlay"></div></div></li>
..........................dan seterusnya
</ul>

Silakan pilih warnanya dan sesuaikan dengan kebutuhan, semoga berhasil..!!!