Button Demo Download Menggunakan Efek Slide

Bosan melihat tombol Demo atau Download yang mononton dan kurang menarik setiap blog yang kita kunjungi, kalo iya saya akan membagi cara membuat tombol Demo atau Download biar tidak monoton dan kurang menarik lagi dengan memberi EFEK SLIDE.Tentu nya penanasarankan? Mari Lihat Demo nya dulu!!

Demo Efek

Setelah anda melihat demonya di atas silahkan anda coba dengan mengikuti langkah-langkah dibawah ini untuk menggunakannya.

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style> Lalu tambahkan kode CSS dibawah tepat diatas kode tersebut.

.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;}

4. Simpan template.

5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info"><h1>DOWNLOAD</h1><ul><li><a href="Link Demo" target="_blank"> DEMO </a></li><li><a href="Link Download" target="_blank"> DOWNLOAD </a></li></ul></div>

NB: Ganti huruf warna biru dengan alamat link demo dan download.