Memasang Slide Button Di Blog

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

Ok singkat saja kita eksklusif 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 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. 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.

Agar tampilan lebih menarik, silakan dapat teman kreasikan kembali. terima kasih.