Cara Membuat Tombol Demo, Download, dan Buy Dengan Icon SVG

Cara Membuat Tombol Demo, Download, dan Buy Dengan Icon SVG

Untuk pertama kalinya blog ini akan berbagi tutorial cara memasang tombol demo, download, dan buy di platform Blogger. Tombol-tombol ini selain digunakan untuk mempercantik tampilan artikel tapi juga untuk menunjang aktifitas blogging kalian.

Pembuka

Pada umumnya tombol seperti ini pasti sering kalian temui di sebuah website dengan konten tutorial, dan toko online. Apabila kalian saat ini sedang mengelola blog dengan konten tutorial seperti kami, akan lebih baik jika anda memasang tombol ini agar menunjang artikel yang akan kalian publikasikan.

Tombol yang kami bagikan ini, selain menggunakan Icon SVG juga memiliki efek hover yang dimana akan terlihat lebih menarik dan cepat saat halaman artikel di tampilkan. Efek hover yang kami maksud ini akan menampilkan berupa animasi transisi dan pengganti warna, selain itu juga kalian akan menemukan efek slide saat mencoba untuk menekannya.

Apakah menarik? jika iya, kalian bisa pasang tombol ini dengan mudah tanpa harus ada kesalahan apabila kalian bisa mengikuti tutorial yang akan kami berikan dibawah ini.

Cara Pemasangan

  1. Login terlebih dahulu ke Blogger
  2. Setelah masuk dashboard, silahkan pilih menu Tema > Edit HTML
  3. Letakkan kode CSS berikut ini, tepat diatas kode ]]></b:skin>
    /* Tombol Download Sempetin */
    #btn-keren {margin: 10px auto;
    text-align: center;}
    #btn-keren br {display: none;}
    .btn-keren1, .btn-keren2, .btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s}
    .btn-keren2 {border: 2px solid #3f51b5;}
    .btn-keren3 {border: 2px solid #d83500;}
    .btn-keren1:hover {background-color: #009688;}
    .btn-keren2:hover {background-color: #3f51b5;}
    .btn-keren3:hover {background-color: #d83500;}
    .btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
    .btn-keren1:hover span.circle{color: #009688;}
    .btn-keren2:hover span.circle2 {color: #3f51b5;}
    .btn-keren3:hover span.circle3 {color: #d83500;}
    .btn-keren1:hover span.title, .btn-keren2:hover span.title2, .btn-keren3:hover span.title3 {left: 40px;opacity: 0;}
    .btn-keren1:hover span.title-hover, .btn-keren2:hover span.title-hover2, .btn-keren3:hover span.title-hover3 {opacity: 1;left: 40px;}
    .btn-keren1 span.circle, .btn-keren2 span.circle2, .btn-keren3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
    .btn-keren2 span.circle2 {background-color: #3f51b5;}
    .btn-keren3 span.circle3 {background-color: #d83500;}
    .btn-keren1 span.title,.btn-keren1 span.title-hover, .btn-keren2 span.title2,.btn-keren2 span.title-hover2,.btn-keren3 span.title3, .btn-keren3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
    .btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #3f51b5;left: 80px;}
    .btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #d83500;left: 80px;}
    .btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {left: 80px;opacity: 0;}
    .btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {
    color: #fff;
    }
  4. Simpan Tema.
Sampai disini kode CSS tombol ini sudah terpasang, akan tetapi belum bisa ditampilkan pada postingan jika kalian belum mengikuti tutorial cara penerapan.

Cara Menerapkan di Postingan

  1. Buat postingan kalian terlebih dahulu
  2. Kemudian letakkan kode HTML berikut ini, pada metode penulisan HTML bukan Compose.
    <div id="btn-keren">
    <a href="#" class="btn-keren1" target="_blank">
    <span class="circle"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /> </svg></span>
    <span class="title">Demo</span>
    <span class="title-hover">Click here</span>
    </a>
    </div>
    
    <div id="btn-keren">
    <a href="#" class="btn-keren2" target="_blank">
    <span class="circle2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> </svg></span>
    <span class="title2">Download</span>
    <span class="title-hover2">Click here</span>
    </a>
    </div>
    
    <div id="btn-keren">
    <a href="#" class="btn-keren3" target="_blank">
    <span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
    </svg></span>
    <span class="title3">Buy Now</span>
    <span class="title-hover3">Click here</span>
    </a>
    </div>
  3. Publikasikan.
Kalian bisa merubah icon yang kami marking dengan icon yang kalian mau, untuk mencari icon nya kalian bisa kunjung wesbite materialdesignicons.com

Untuk demo atau preview lebih jelasnya, kalian bisa tekan tombol dibawah ini agar ditujukan langsung ke situs codepen.

Penutup

Jika mempunyai pertanyaan seputar tombol seperti ini, bisa langsung ditanyakan pada kolom komentar. Harap dimaklumi jika ada salah dalam penyampaian atau penulisan kata, itu semua di karenakan kami memang masih baru dalam dunia blogging.

Mungkin sekian dulu yang bisa saya berikan, semoga bermanfaat untuk kalian semua, jangan lupa share dan vote artikel ini.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

Tidak ada komentar