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 adalah bagaimana cara memasang slide button dengan CSS. Pada postingan kali ini anda hanya perlu meletakan aba-aba CSS saja, berbeda dengan yang lain, button ini memakai efek "HOVER" dan "INSET" sederhana sehingga tidak akan membebani kinerja pada blog.
Nah selanjutnya kita pribadi saja ke tutorialnya, berikut langkah-langkah memasang slide button dengan css .
1. Masuk Ke Akun Blogger > Klik Menu Tema > Edit HTML > dan letakan aba-aba CSS dibawah ini sempurna pada aba-aba </style> .
2. Selanjutnya untuk menampilkan Slide Button anda cukup tambahkan aba-aba HTML dibawah ini dan letakan di Post Editor pada tab HTML .
3. Setelahnya simpan dan lihat hasilnya, untuk demo script anda dapat melihat pada link dibawah ini.
Nah selanjutnya kita pribadi 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 aba-aba CSS dibawah ini sempurna pada aba-aba </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 aba-aba 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 dapat melihat pada link dibawah ini.
Nah mungkin cukup sekian tutorial bagaimana cara memasang slide button dengan CSS, agar tutorial ini bermanfaat bagi anda. apabila anda masih kurang mengerti atau kurang paham dengan tutorial diatas, silahkan anda bertanya lewat berkomentar dibawah postingan ini.