Mendesain Tombol Slide DEMO dan DOWNLOAD dengan CSS

Mendesain Tombol Slide DEMO dan DOWNLOAD dengan CSS

Membuat tombol atau button demo dan download di blog memang sangat berguna untuk kita semua yang bermain di dunia blogger, karena dengan adanya tombol ini akan membuat pengunjung blog kita lebih senang untuk berkunjung kembali di blog kita, apalagi niche blog yang dikunjungi tersebut bertopik tentang Tutorial dan Download mendownload.

Button Demo dan download yang akan saya bagikan ini sangatlah simple,ringan dan tidak kalanya dengan tombol yang lain karena dilihat lebih elegant hanya menggunakan Css saja sehingga tidak mempengaruhi beban loading blog. Nah jika anda tertarik, dibawah berikut saya akan membagikan demo tombolnya dan cara penerapanya kepada anda.
Tombol Slide DEMO dan DOWNLOAD dengan CSS

Cara Membuat Tombol Demo dan Download

1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>
/* CSS Slide Demo and Download Button */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:18px;line-height:50px;margin:0;
padding:0;width:100%;background:#e25734;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;border-radius:3px 3px 6px 6px;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:16px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#c34c2e;color:#fff;}
.download-info{background:#2A9F40;}
.download-info h1{background-color:#444;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:18px;line-height:50px;margin:0;
padding:0;width:100%;background:#444;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;border-bottom:3px solid #c34c2e;border-radius:3px 3px 6px 6px;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:16px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#e25734;color:#fff;}
.demo-info{background:#333;}
.demo-info h1{background-color:#cb4f30;}
4. Simpan template anda.
5. Cara Pemanggilan kodenya pada postingan , masukkan kode berikut pada postingan anda dengan mode edit HTML.
<div class="download download-info">
<h1>
DOWNLOAD </h1>
<ul>
<li><a href="http://www.kabarlangit.com/demo" target="_blank"> DEMO </a></li>
<li><a href="http://www.kabarlangit.com/download" target="_blank"> DOWNLOAD </a></li>
</ul>
</div>
NOTE :
  • Ganti Link http://www.kabarlangit.com/demo untuk link Demo.
  • Ganti Link http://www.kabarlangit.com/download untuk link Download.
 6. Simpan postingan anda dan lihat hasilnya pada blog anda. semoga bermanfaat....

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »