Selamat malam sobat,.. Apa kabar,??
Untuk malam ini saya akan membagikan trick yang cukup keren dan menarik, Kalau sebelum nya kan saya pernah membuat tutorial tentang "Cara membuat tombol Demo dan Download" nah untuk yang ini beda lagi tombol nya gan kalau fungsi tetap sama cuma beda di tombol nya ajah kalau yang kemarin kan tombol cuma sekedar CSS untuk yang ini menggunakan efek slide,..

Demo nya seperti ini:

DOWNLOAD

Gimana keren kan,..???
Jika sobat berminat memasang CSS slide Demo and Download button tersebut silahkan sobat,

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini 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;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;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;}
.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:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;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;}
.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:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}

5. Kemudian simpan template sobat

EittzZ belum selesai gan,..
6. Untuk kode pemanggil nya sobat COPAS kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML)

<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://irvan-efendy.blogspot.com/" target="_blank"> DEMO </a></li>
<li><a href="http://irvan-efendy.blogspot.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>

Okey,.. Cukup sekian tutorial dari saya,..
Semoga Bermanfaat,......

Terima kasih telah membaca artikel tentang CSS slide Demo and Download button di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.