Cara Membuat Tombol Download Line Bersentuhan

Ok Sobat. Saaaya Akan memberitahu Tombol Demo Download Dengan Line Saat Disentuh

Yang Dipakai Saya Saat Ini 😄😄

Nah Pasti Oranggg,, Tidak Ada Yang Ngepost Demo Download Yang Kaya Gambar Di atas 😆
PAsti Blog  Zanderdask [ Pengatahuan Web Pasti Solusinya ] :D Yok Lanjutkan aja :D
Copikan Ini Dalam CSS / [ b:/style ]
Dgn Gambar Ini CSS Khusus ya !!



Silahkan Zoom Gambarnnya Atau Klik YA !!

 Copikan Scriptt Ini Dgn CSS [ Khusus ]

                           TRIPLE 3X COPI DGN SCRIPT INI [ CSS KHUSUS ]

/*DemoButton*/
.demoseocips { padding:8px 15px; margin:0 12px; border:1px solid #444; box-shadow:0 0 10px #111; display:inline-block; outline:none; }
.demoseocips:hover { background:#222; box-shadow:1px 1px 5px rgba(0,0,0,.8) inset; }
/*NextPrevious*/
.pagebutton-nextprevious { background:#2f2f2f; overflow:hidden; padding:0; border:1px solid #444; box-shadow:1px 1px 5px rgba(0,0,0,.8); }
.pagebutton-nextprevious a:link,.pagebutton-nextprevious a:visited { text-decoration:none; }
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float:left; border-right:1px solid #444; padding:0; }
.pagebutton-nextprevious li.next a { padding-left:15px; text-align:left; padding-bottom:20px; }
.pagebutton-nextprevious li.previous { float:right; padding:0; margin:0; }
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right; padding-bottom:20px; }
.pagebutton-nextprevious li { width:50%; display:inline; float:left; text-align:center; }
.pagebutton-nextprevious li a { position:relative; min-height:55px; display:block; padding:15px 46px 15px; outline:none; text-decoration:none; }
.pagebutton-nextprevious li i { font-size:12px; }
.pagebutton-nextprevious li a strong { display:block; font-size:13px; letter-spacing:0.5px; font-weight:bold; text-transform:uppercase; font-family:oswald,sans-serif,arial; margin-bottom:10px; }
.pagebutton-nextprevious li a span { font-size:12px; font-family:oswald,Helvetica,arial; margin:0; transition:all 400ms ease-in-out; }
.pagebutton-nextprevious li a:hover span,.pagebutton-nextprevious li a:hover i { color:#ffcc00; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float:right; margin-top:15%; margin-right:5%; }
.pagebutton-nextprevious li.next i,.pagebutton-nextprevious li.previous i,.pagebutton-nextprevious li.next,.pagebutton-nextprevious li.previous { transition:all 400ms ease-in-out; }
.note { background:#292929 url(http://3.bp.blogspot.com/-BRhka8qCnbI/VRTOKOrpVfI/AAAAAAAAELQ/-uz_WSOvmCY/s110/thanks-seocips.png) no-repeat left; min-height:38px; padding:10px 12px 12px 68px; margin:5px 0; font:normal 13px Arial,Sans-Serif; }
.note { color:#ddd; line-height:25px; border:1px solid #444; box-shadow:1px 1px 5px rgba(0,0,0,.8) inset; border-radius:4px; }
.note a:link,.note a:visited { color:#ccc; }
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #111111;box-shadow:0 3px 3px #333;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#111111;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#444;color:#fff;}
.download-info{background:#222;}
.download-info h1{background-color:#e6c300;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}
.alert1 {margin: 10px 10px 10px 10px; padding: 10px 15px 10px 15px; line-height: 1.6em;color: #000000; background: #B1BFDD; border: 1px solid #B1BFDD; border-left: 5px solid #000000}
.alert2 {margin: 10px 10px 10px 10px; padding: 10px 15px 10px 15px; line-height: 1.6em;color: #000000; background: #ffffff; border: 0px solid #000000; border-left: 5px solid #F20A0A}
.alert3 {margin: 10px 10px 10px 10px; padding: 10px 15px 10px 15px; line-height: 1.6em;color: #000000; background: #C6FFC8; border: 0px solid #000000; border-left: 5px solid #00EA02}
.alert4 {margin: 10px 10px 10px 10px; padding: 10px 15px 10px 15px; line-height: 1.6em;color: #000000; background: #FE9898; border: 1px solid #F60000; border-left: 1px solid #F60000}
.alert5 { width:auto; display:block; overflow:hidden; word-wrap:break-word; margin:10px 0; padding:10px; border:1px solid #444; box-shadow:1px 1px 5px rgba(0,0,0,.8) inset; }
.forum {margin: 10px 10px 10px 10px; padding: 10px 15px 10px 15px; line-height: 1.6em;color: #D24836; background: #fff; border: 1px solid #D24836; border-left: 5px solid #D24836}
.tagpost {border:1px solid #444;margin: 3px 0;height: 36px;overflow: auto;width: 98%;background-color:#333;font-size: 11px;line-height: 16px;padding:0 5px}

Sudah Itu Save.
Buka Post-> Entri Baru -> HTML  Buka
Copikan Script DEMO DOWNLOAD

                               TRIPLE 3X COPI DGN SCRIPT INI [ DOWNLOAD BUTTON 

<br /><div class="download download-info"><h1>Demoo See It&nbsp;</h1><ul><li><a href="#LINK_KAMU">Demo1</a></li><li><a href="#LINK_KAMU">Demo2</a></li><li><a href="#LINK_KAMU">Demo3</a></li><li><a href="#LINK_KAMU">Demo4</a></li></ul></div><br />

Dan Selesai Click Save Dan Apa Yang Terjadi😀
Pfpp Capek Juga ya Ngetiknya 😄😄 , heheheeh
Dan Terimah KAsih Telah Baca .. Tadi kalau kesalahan script Silahakan komentar bawah yah ..
Semoga bermanfaat !!! [ Edit Sesuka Anda ] ===================================================================== Demo Aja