Cara Memasang Slide Button dengan CSS

Cara Memasang Slide Button dengan CSS - Halo pembaca setia kamsuy blog, kali ini saya selaku penulis kamsuy blog akan membahas seputar CSS yaitu bagaimana cara memasang slide button dengan CSS. Pada postingan kali ini anda hanya perlu meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "HOVER" dan "INSET" sederhana sehingga tidak akan membebani kinerja pada blog.

Nah selanjutnya kita langsung saja ke tutorialnya, berikut langkah-langkah memasang slide button dengan css .

Memasang Slide Button dengan CSS

1. Masuk Ke Akun Blogger > Klik Menu Tema > Edit HTML > dan letakan kode CSS dibawah ini tepat pada kode </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 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #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 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;} 

2. Selanjutnya untuk menampilkan Slide Button anda cukup tambahkan kode HTML dibawah ini dan letakan di Post Editor pada tab HTML .

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

3. Setelahnya simpan dan lihat hasilnya, untuk demo script anda bisa melihat pada link dibawah ini.

DEMO 

Nah mungkin cukup sekian tutorial bagaimana cara memasang slide button dengan CSS, semoga tutorial ini bermanfaat bagi anda. apabila anda masih kurang mengerti atau kurang paham dengan tutorial diatas, silahkan anda bertanya lewat berkomentar dibawah postingan ini.