Nah Kali ini Love Karawang Akan Membagi sedikit Tips Cara Membuat Tombol Download Slide Saat Disentuh Cursors Mouse Yang Bisa Kalian Lakukan sendiri Di Bloger Kalian :)
- Copikan Ini Dalam CSS / [ ]]></b:skin> ]
- Dengan Gambar Ini CSS Khusus ya !!
Silahkan Zoom Gambarnnya Atau Klik YA !!
- Copikan Scriptt Ini Dgn 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXy_1yksp-gEbJsQ4Kba11LG8NlGvAsZ3E-tBEjV42NipUvacE408DgWeKV36jKILkrNkI-JZr4QnoQYF3eVT6eEi5fRSRnXTLlAXB_BbpcvpW1g-C88JvL_TPPD33dhG36DXZLFaYPw/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 </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
Semoga bermanfaat !!!
Posting Komentar