 |
| Demonya Kayak gini gan !! |
Apa Kabar Teman Teman Blogger , Kali ini saya akan membagikan Bagaimana cara membuat slide demo dan download butoon profesional, Mungkin anda sering melihat Tombol tersebut namun sekarang saya akan membagikan suatu hal yang berbeda dengan yang lainnya ,
Tutorial ini Saya buat atas permintaan sobat disini untuk membuat tombol demo dan download dengan efek animasi yang menarik. Ok langsung saja disimak caranya.
Catatan : Sebelumnya Anda sudah menerapkan fontawesome pada blognya
Pertama buka blogger > Template > Klik Edit HTML dan terapkan kode di bawah ini tepat sebelum </style>atau ]]></b:skin>
#wrap { margin: 20px auto; text-align: center;} .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 kode pemanggil silahkan terapkan pada postingan tab HTML.
Agar tampilannya rapi saat memasukkan kode HTML kedalam postingan, sebaiknya gunakan Tekan "Enter" untuk baris baru pada menu "Pilihan" seperti 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.
0 comments:
Posting Komentar