Cara Membuat Tombol Download Dan Demo Keren Di Blogger

Posted by Voizd.com

March 08, 2023

Cara Membuat Tombol Download Dan Demo Keren Di Blogger

Voizd.Com , Cara Membuat Tombol Download Dan Demo Keren Di Blogger - Hai Sobat , dikesempatan Kali ini kita akan membahas mengenai Cara Membuat Tombol Download Dan Demo Keren Di Blogger, Tutorial kali ini menggunakan efek dari sebuah kode CSS yang membuat tampilan Blog sobat terlihat semakin keren.

Tombol download keren ini dapat digunakan dan sangat cocok untuk kamu yang memiliki blog dengan tema Download.selain itu efek ini juga memberikan efek transisi warna ketika digeser. Tanpa Berlama-lama yuk disimak Tutorialnya.

Cara Membuat Tombol Download Keren Diblogger.

1. Pertama-tama silahkan sobat masuk ke akun Blogger yang kamu miliki, Selanjunya pilih Tema - Lalu edit HTML.

2. Copy kode untuk Font Awesome berikut sebelum tag </head>

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

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.

5. Copy dan paste kode berikut untuk memasang tombol keren.

Pada href="#", silahkan ganti # dengan url yang dituju. Misal Voizd.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>
</div>

6. Jika sudah klik publish

Penutup

Demikianlah Tutorial Tentang Cara Membuat Tombol Download Dan Demo Keren Di Blogger, Semoga dapat memberikan manfaat kepada pembaca dan blog sobat terlihat lebih keren.