Memasang Slide Demo dan Download Button - Pada kesempatan kali ini Saya akan membuatkan tutorial memasang tombol demo dan download dengan dampak slide.
Tutorial ini Saya buat atas ajakan teman disini untuk menciptakan tombol demo dan download dengan dampak animasi yang menarik. Ok pribadi saja disimak caranya.
Catatan : Sebelumnya Anda sudah menerapkan fontawesome pada blognya
Pertama buka blogger > Template > Klik Edit HTML dan terapkan isyarat di bawah ini sempurna sebelum </style> atau ]]></b:skin>
#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }Simpan template.
Langkah selanjunya, untuk isyarat pemanggil silahkan terapkan pada postingan tab HTML.
Agar tampilannya rapi ketika memasukkan isyarat HTML kedalam postingan, sebaiknya gunakan Tekan "Enter" untuk baris baru pada sajian "Pilihan" ibarat gambar di bawah ini
<div id="wrap"> <a href="#" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="#" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>Selesai.
Demo tampilan :
See the Pen Slide Demo dan Download Button by (@arlinadesign) on CodePen.
Selamat mencoba dan agar bermanfaat.
Inspired by : http://css-tricks.com/slide-to-unlock/