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 Awesome yang telah saya share sebelumnya.

DEMO

Konsep Dasarnya

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

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>

Demikian semoga bermanfaat

SOURCE