-->
Memasang Slide Button Di Blog
4/ 5 stars - "Memasang Slide Button Di Blog" Memasang Slide Button di Blog - Untuk tips kali ini hanya teman hanya perlu meletakan isyarat CSS saja, berbeda dengan yang lain, button in...

Memasang Slide Button Di Blog



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

 Untuk tips kali ini hanya teman hanya perlu meletakan isyarat CSS saja Memasang Slide Button di Blog

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