Memasang Slide Button di Blog

Memasang Slide Button di Blog

Snippet Tips Blogger

Arlina

2/27/2016

Untuk tips Memasang Slide Button di Blog kali ini hanya sobat hanya perlu meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog.

Ok singkat saja kita langsung saja ke tutorial :

1. Simpan CSS Ini Diatas </style>

#wrap{margin:20px auto;text-align:center}
a.btn{display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out}
a.btn:hover{background:#30abd5;color:#fff;box-shadow:inset 0 -50px 0 #22313F}
a.btn:active{color:#05555e;box-shadow:inset 0 -50px 0 #f5f7fa}
a.btn.warn{background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5}
a.btn.warn:hover{background:#f5f7fa;color:#fff;box-shadow:inset 0 -50px 0 #30abd5}
a.btn.warn:active{color:#fff;box-shadow:inset 0 -50px 0 #30abd5}
0px -50px 0 #30abd5}

2. Lalu gunakan markup dibawah ini pada post editor tab HTML

<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>

3. Simpan.

• Result

Agar tampilan lebih menarik, silakan bisa sobat kreasikan kembali. terima kasih.

Arlina