Flat ui button awesome modal dialog

3

Click here to load reader

Transcript of Flat ui button awesome modal dialog

Page 1: Flat ui button awesome modal dialog

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

Page 2: Flat ui button awesome modal dialog

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..!!!

Page 3: Flat ui button awesome modal dialog

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