Cara membuat button dan button download tampilan keren

MasBrio - Di postingan pertama admin ini akan mengajarkan cara membuat dan mempercantik tampilan Button Demo dan download.

Tampilan keren kode css button demo dan download
Cara mempercantik tampilan blog kita dengan menggunakan kode css tombol download, dengan merubah tampilan tombol download blog menjadi tombol download button demo dan download maka akan sangat lah keren dan responsive.

Cara memasang tombol button

Login pada akun blogger
Masuk ke pengeditan template
Cari kode ]]></b:skin>
Dan paste kan kode di bawah ini
Tepat Di atas kode ]]></b:skin>

#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }

Pasang juga kode di bawah ini telat di bawah kode </head> di bawah ny

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Sekarang silahkan Save template

Setiap bikin artikel baru silahkan paste kan kode css di bawah ini tepat di hml nya.

<div id="wrap">
<a class="bie-slide" href="http://masbrio.blogspot.com" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="http://masbrio.blogspot.com" 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>

Sekarang ubah https://masbrio.blogspot.com dengan link download kalian.

Salah satu mempercantik tampilan blog download
ini adalah salah satu trik untuk menpercantik pada tampilan blog download kita agar tampilan nya sedikit lebih menarik lagi, dengan kata lain kita membuat tampilan download yang lebih bagus dari pada bawaan blog sendiri.

Terimah requet Artikel selanjutnya
kami juga terimah tutorial cara mendesain tampilan blog yang kalian mau secara gratis, bagai kalian yang ingin di bikinin tutorial desain blog silahkan berkomentar di bawah ya.