Skip to content Skip to sidebar Skip to footer

Cara Membuat Tombol Download, Demo Dan Buy Now Keren Di Blogger

Cara Membuat Tombol Download Dan Demo Keren Di Blogger

Cara Membuat Tombol Download, Demo Dan Buy Now Keren Di Blogger - Halo sobat rizaluye, 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.

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

  • Silahkan masuk ke blogger.com → pilih menu Tema → lalu Edit HTML
Cara Membuat Tombol Download Dan Demo Keren Di Blogger


  • 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'/>
  • Copy dan pastekan kode CSS berikut diatas tag </style>, Lalu 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;
}


  • Setelah itu silahkan masuk ke postingan yang ingin di tambahkan tombol keren ini, lalu pilih mode 
  • Copy dan paste kode berikut untuk memasang tombol keren. Pada hre"#" , silahkan ganti # dengan url yang dituju, misalnya hre"https://www.rizaluye.my.id/" .
<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>

jika sudah Selesai maka klik simpan dan publish

Demikianlah atikel kali ini tentang Cara Membuat Tombol Download, Demo Dan Buy Now Keren Di Blogger, Semoga bermanfaat.

Untuk Demonya DISINI



Post a Comment for "Cara Membuat Tombol Download, Demo Dan Buy Now Keren Di Blogger"