Cara Membuat Tombol Download, Demo dan Buy Now Keren di Blogger ala JejakPintar

Cara Membuat Tombol Download, Demo dan Buy Now Keren di Blogger ala JejakPintar - Halo sobat blogger sekalian, pada kesempatan kali ini admin akan memberikan sedikit tutorial bagaimana Cara Membuat Tombol Download, Demo dan Buy Now di Blogger dengan CSS SVG yang tentu membuat blog sobat masih dapat bekerja dengan performa yang tetap cepat diakses.

Apa yang keren dari tombol dengan style ini?

Dengan memadukan animasi hover yang sangat keren yaitu berupa animasi transisi dan background gradiasi yang sangat apik, tombol ini akan membantu blog sobat tampil dengan performa yang lebih menarik dan enak untuk dipandang.

Dengan keuntungan tersebut, otomatis pengunjung blog sobat akan semakin betah dan sering berkunjung di blog sobat kan?

Oke, langsung saja ke tutorialnya! Simak terus ya..

Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger ala JejakPintar

1. Silahkan sobat login ke akun blogger sobat.

2. Masuk ke menu TEMA lalu klik Edit HTML

3. Selanjutnya cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Tombol Download */
#btn-keren {margin: 10px auto;
text-align: center;}
#btn-keren br {display: none;}
.btn-keren1 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren1:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren2:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren3:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;border-radius: 100%;margin-left: -45px;background-color: transparent;}
.btn-keren1:hover span.circle{color: #fff;}
.btn-keren2:hover span.circle2 {color: #fff;}
.btn-keren3:hover span.circle3 {color: #fff;}
.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 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-keren2 span.circle2 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-keren3 span.circle3 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.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: #fff;transition: .5s;}
.btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #fff;left: 70px;}
.btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #fff;left: 60px;}
.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;
}

Silahkan sobat sesuaikan sendiri untuk warnanya

4. Jika sudah, klik SIMPAN.

Langkah Terakhir,

6. Buatlah postingan baru kemudian silahkan copy kode dibawah ini dan pastekan di menu 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>

Apabila sobat hanya ingin memasang salah satu atau dua tombol saja misalnya tombol demo saja, silahkan sobat cukup pasang salah satu kode html diatas dengan keterangan;

a. class="btn-keren1" untuk kode tombol Demo.

b. class="btn-keren2" untuk kode tombol Download.

c. class="btn-keren3" untuk kode tombol Buy Now.

Sesuaikan sesuai keinginan sobat sendiri ya,,,

Nah, untuk demonya silahkan sobat bisa lihat dibawah ini;

PREVIEW

Bagaimana mudah bukan untuk tutorial Cara Membuat Tombol Demo, Download, dan Buy Now keren di blogger ala JejakPintar. Jika ada yang ditanyakan silahkan bisa komen dibawah ya sobat. Jangan lupa dishare juga:)))

Subscribe Our Newsletter