 |
| Cara Membuat Tombol Download Dan Demo Keren Di Blogger |
SekilasPC.Com , Cara Membuat Tombol Download Dan Demo Keren Di Blogger - Hai Sobat Sekilas PC, 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'/>
#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;
}
<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>