Cara Membuat Tombol Demo Download dan Buy di Blogger dengan Efek Menarik

Punya blog download ? atau punya blog bertema tema blogger ? Jika iya pastinya kamu butuh sebuah tombol dowload yang menarik.

Kali sobat blognesia akan berbagi tutorial membuat tombol download demo dan beli, tombol ini biasanya digunakan untuk blog bertema download.

Cara Membuat Tombol Demo Download dan Buy di Blogger

Membuat tombol download demo atau buy cukup mudah, blognesia sudah menyiapkan script dan css untuk membuat tombolnya. Jadi sobat blognesia tinggal copy dan paste kode berikut.

Langsung saja, Berikut ini Tutorial Cara Membuat Tombol Demo Download dan Buy di Blogger dengan Efek menarik :

1. Masuk Blogger.com kemudian pilih menu Tema, masuk halaman Edit HTML

2. Salin dan tempel kode berikut diatas kode </head>

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

3. Salin dan tempel kode css berikut ini diata kode tag </style> kemudian Simpan

#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: 42px;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. Untuk menampilkan tombol download demo dan buy kalian bisa salin dan tempel kode berikut di postingan dengan mode HTML

<div id="btn-keren">
<a href="#" class="btn-keren1"  target="_blank">
<span class="circle"><i class="fa fa-desktop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-keren2"  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>
<a href="#" class="btn-keren3"  target="_blank">
<span class="circle3"><i class="fa fa-shopping-cart"></i></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Click here</span>
</a>
</div>

5. Ganti kode # dengan link tujuan, kalian juga bisa merubah nama tulisan tombol keren buy now, download dan demo sesuai kebutuhan.

Selamat mencoba.

Tinggalkan Balasan