Kita Sekarang Akan Memberikan Trik Cara Buat Tombol Download Dengan Efek Show Hide Di Blog Tentunya, Bisa Juga Di Yang Lain,
Langsung Tutorialnya Aje Dah ...
Buka Html Template...
Cari Kode </head>
Lalu Pasang Kode Di Bawah Ini Tepat DI Atas Kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Lalu Cari Lagi Kode </b:skin>
Bila Ketemu Silahkan Copy Kode Di Bawah Ini .. .. .. Pasang Di Atas Kode </b:skin>
/* Download and Demo White Button Show Hide */ .whitebutton { margin: 20px auto; padding: 20px 0; width: 200px; } .whitebutton a { background: #fff; color: #666; display: block; font-size: 17px; font-weight: 700; font-family: 'Arial',Verdana,sans-serif; height: 50px; line-height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2; } .whitebutton a:before { content: '\f019'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -12px; margin-right: 6px; } .whitebutton span { background: #444; color: #fff; display: block; font-size: 12px; font-family: 'Arial', Verdana,sans-serif; height: 40px; line-height: 40px; text-align: center; width: 200px; z-index: 1; text-transform: uppercase; font-weight: bold; } .whitebutton .up { background: #e25734; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; } .whitebutton .down { margin: -30px auto; opacity: 0; border-radius: 5px 5px 0 0; transform: translate(0,-50px); transition: 350ms; } .whitebutton .down:before { content:'\f14a'; font-family: FontAwesome; font-weight: normal; margin-right: 6px; color: #aaa; } .whitebutton:hover .up { opacity: 1; transform: translate(0,0); } .whitebutton:hover .down { opacity: 1; transform: translate(0,-90px); } .whitebuttondemo { margin: 20px auto; padding: 20px 0; width: 200px; } .whitebuttondemo a { background: #e25734; color: #fff; display: block; font-size: 17px; font-weight: 700; font-family:'Arial',Verdana,sans-serif; height: 50px; line-height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2; transition: 350ms; } .whitebuttondemo a:before { content:'\f002'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -12px; margin-right: 6px; } .whitebuttondemo a:hover { color: #fff; } .whitebuttondemo span { background: #444; color: #fff; display: block; font-size: 12px; font-family: 'Arial', Verdana,sans-serif; height: 40px; line-height: 40px; text-align: center; width: 200px; z-index: 1; text-transform: uppercase; font-weight: bold; } .whitebuttondemo .up { background: #444; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; } .whitebuttondemo:hover .up { opacity: 1; transform: translate(0,0); }Lalu Tinggal Htmlnya
Htmlnya Pasang Di Mana Saja
<div class="whitebuttondemo"> <a href="LINK DEMO" title="TITLE" target="_blank">JUDUL DEMO</a><br /> <span class="up">click to view</span></div> <br /> <div class="whitebutton"> <a href="LINK DOWNLOAD" title="TITLE" target="_blank">JUDUL DOWNLOAD</a><br /> <span class="up">click to begin</span><br /> <span class="down">2210MB .rar</span></div> <br /> <br />Sekian Dari Saya .. .. ..
