1. 6/28/2014 Flat UI Button Awesome Modal Dialog | SAMSURY SITES
http://samsury-sites.blogspot.com/2014/06/flat-ui-button-awesome-modal-dialog.html 1/3
SAMSURY SITES Tutorial Blog
    
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
Untuk konsep dasarnya seperti dibawah ini :
CSS
<link href='http://googledrive.com/host/0B0QTgfBgnob0Q18zMVAzc0NtcXM' rel='stylesheet'/>
 HOME  AWESOME  BUTTON  FLAT UI  MODAL  Flat UI Button Awesome Modal Dialog

  

2. 6/28/2014 Flat UI Button Awesome Modal Dialog | SAMSURY SITES
http://samsury-sites.blogspot.com/2014/06/flat-ui-button-awesome-modal-dialog.html 2/3
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;
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..!!!

3. 6/28/2014 Flat UI Button Awesome Modal Dialog | SAMSURY SITES
http://samsury-sites.blogspot.com/2014/06/flat-ui-button-awesome-modal-dialog.html 3/3

Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish Preview
BY SAMSURY SITES | SITEMAP