√ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger - Teknolalat

Find Us OIn Facebook

Cara Membuat Tombol Download dan Demo Keren di Blogger
Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger - Halo sobat blogger, pada artikel kali ini saya akan membagikan CSS untuk membuat button download, demo dan buy now yang akan membuat tampilan blog Anda semakin keren dan rapi.

Tombol download keren, demo dan buy now keren untuk blog ini bisa digunakan diberbagai template dan tentunya cocok bagi Anda yang mempunyai blog dengan niche download template dan aplikasi yang memerlukan button responsive untuk mendownload file.

Selain itu tombol keren ini memiliki efek hover yang keren, yaitu berupa efek transisi dan pergantian warna. Untuk menggunakan button ini diperlukan icon dari font awesome, namun jika Anda tidak menggunakan font awesome, Anda bisa menggantinya dengan icon SVG.

Cara Membuat Tombol Keren di Blogger

Berikut tutorial cara membuat tombol download, demo dan buy now keren di blog beserta cara memasang button di artikel.

1. Silahkan masuk ke blogger.com → pilih menu Tema → lalu Edit HTML.

Edit HTML Blogger

2. Copy kode untuk Font Awesome berikut sebelum tag </head>, biasanya kode sudah ada ditemplate Anda.

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

(Opsional) jika Anda tidak ingin menggunakan Font Awesome maka Anda tidak perlu mengcopy kode tersebut, untuk menggantinya dengan ikon SVG silahkan ikuti langkah dibawah.

3. Copy dan pastekan kode CSS berikut diatas tag </style>. Setelah itu klik 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. Setelah itu silahkan masuk ke postingan yang ingin di tambahkan tombol keren ini, lalu pilih mode HTML.

Edit HTML tombol download

5. Copy dan paste kode berikut untuk memasang tombol keren. Pada href="#", silahkan ganti dengan url yang dituju, misalnya href="drive.google.com".

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

Apabila Anda hanya ingin memasang salah satu tombol saja, misal tombol download saja, silahkan hapus kode lain dari tag <a href='.... > hingga </a>, contohnya seperti berikut.

<div id="btn-keren">
<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>
</div>

Mengganti dengan Ikon SVG (Opsional)


1. Silahkan copy kode berikut untuk ikon svg.

<!-- Ikon Demo -->
<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>
<!-- Ikon Download -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>
<!-- Ikon Buy -->
<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>

2. Pilih kode <i class='fa fa.....'></i> yang terdapat diantara tag <span class='circle'> dan </span>. Maka hasilnya akan seperti berikut.

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

Langkah 3. Silahkan cari CSS line-height: 42px lalu ganti menjadi 55px.

Selesai...


Penutup

Itu tadi tutorial cara membuat tombol demo, download dan buy now keren dengan animasi di blogger. Sekian artikel singkat ini, selamat mencoba dan semoga bermanfaat.
Load Comments
Lebih baru Lebih lama