Cara Buat Button Demo Download Buy di Blogger

Cara buat Button Keren Demo,Download,Buy di Blogger

• Silahkan Login Akun Gmail.
• Login ke akun blogger Anda Masing-Masing.
• Masuk ke menu atau Dashboard Klik Tema blogger anda, lalu anda klik Edit HTML.

Selanjutnya cari kode :

1. Lalu Copy kode css dibawah ini tepat diatas kode :

---

/* Tombol Download Demo Dan Buy Now */ #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; }

2. Selanjutnya SAVE

---

Coding Button

Copy Code dibawah ini di Postingan Anda:

<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>

HASILNYA AKAN SEPERTI DIBAWAH INI,APABILA PENERAPAN SESUAI DENGAN TAHAPAN DI ATAS :

Demo Click here

Download Click here

Buy Now Click here