S. Widodo
Alhamdulillah masih bisa menulis artikel lagi hari saya akan berbagi ilmu bagaimana membuat sebuah tombol download dengan efek modal full css tanpa menggunakan jquery maupun javascript, pembuatan tombol ini cukup simpel dan tidak banyak kodenya mungkin langsung saja kita praktekkan bersama-sama cara pembuatan sebuah tombol download dengan modal:
1. Silahkan kopi dan paste css dibawah ini dan simpan diatas kode ]]></b:skin>
.button{ width:340px;margin:auto;margin-top:5px;padding-left:10px;}
.button a{background:#F1614D;float:left;margin:5px; color:#ffffff;padding:15px 20px 15px 20px;list-style:none;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:normal;text-align:center;text-transform:uppercase}
.button a:hover{background:#333333;color:#ffffff;} .show-download{width:50%;height:350px;overflow:hidden;display:block;top:20px;
position:fixed;left:0;right:0;margin-left:auto;margin-right:auto;z-index:10; margin-top:-150%;background-color:#FFFFFF;opacity: 0;border:solid 1px #eeeeee;-webkit-transition: opacity .6s ease-in-out;-moz-transition: opacity .6s ease-in-out;-o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;border-radius:6px;-moz-box-shadow: 0 0 1px #ccc;-webkit-box-shadow: 0 0 1px #ccc;box-shadow: 0 0 1px #ccc; }
.show-download:target{opacity: 1;margin-top:5%;}
.kontent{padding:15px;}.kontent h3{font-family:Arial, Helvetica, sans-serif;text-align:center;font-size:17px;color:#999999;}
.show-download-top{background:#F9F9F9;width:auto;display:block;padding:10px 10px;font-family:Arial, Helvetica, sans-serif;text-align:center;color:#999999;font-weight:bold;}
.show-download-top a{float:right;margin-top:-2px;text-decoration:none;font-weight:bold;padding:1px 3px 1px 3px;color:#999999;font-family:Verdana, Arial, Helvetica, sans-serif}
.show-download-top a:hover{color:#cccccc;}
.button a{background:#F1614D;float:left;margin:5px; color:#ffffff;padding:15px 20px 15px 20px;list-style:none;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:normal;text-align:center;text-transform:uppercase}
.button a:hover{background:#333333;color:#ffffff;} .show-download{width:50%;height:350px;overflow:hidden;display:block;top:20px;
position:fixed;left:0;right:0;margin-left:auto;margin-right:auto;z-index:10; margin-top:-150%;background-color:#FFFFFF;opacity: 0;border:solid 1px #eeeeee;-webkit-transition: opacity .6s ease-in-out;-moz-transition: opacity .6s ease-in-out;-o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;border-radius:6px;-moz-box-shadow: 0 0 1px #ccc;-webkit-box-shadow: 0 0 1px #ccc;box-shadow: 0 0 1px #ccc; }
.show-download:target{opacity: 1;margin-top:5%;}
.kontent{padding:15px;}.kontent h3{font-family:Arial, Helvetica, sans-serif;text-align:center;font-size:17px;color:#999999;}
.show-download-top{background:#F9F9F9;width:auto;display:block;padding:10px 10px;font-family:Arial, Helvetica, sans-serif;text-align:center;color:#999999;font-weight:bold;}
.show-download-top a{float:right;margin-top:-2px;text-decoration:none;font-weight:bold;padding:1px 3px 1px 3px;color:#999999;font-family:Verdana, Arial, Helvetica, sans-serif}
.show-download-top a:hover{color:#cccccc;}
2. sekarang kita tinggal memanggil kode cssnya dengan menggunakan HTML kode html ini bisa ditaruh dalam form artikel blog kalian, kode ada dibawah :
<div class="show-download" id="show">
<div class="show-download-top">DEMO TOMBOL DOWNLOAD <a href="#x">x</a></div>
<div class="kontent">
<h3> TITLE KONTEN ARTIKEL</h3>
<div class="button"><a href="#show">DOWNLOAD</a><a href="#close">DEMO CLOSE</a></div>
</div></div>
<div class="show-download-top">DEMO TOMBOL DOWNLOAD <a href="#x">x</a></div>
<div class="kontent">
<h3> TITLE KONTEN ARTIKEL</h3>
<div class="button"><a href="#show">DOWNLOAD</a><a href="#close">DEMO CLOSE</a></div>
</div></div>
3. berhasil
untuk lihat demonya silahkan klik tombol demo dibawah ini
Komentar