Widodo

Tombol Download dengan modal

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

 

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>
 

3. berhasil

untuk lihat demonya silahkan klik tombol demo dibawah ini

DEMO



Artikel Terkait

0 Komentar