Cara Memasang Slide Button Keren Untuk Blog

Cara Memasang Slide Button Keren Untuk Blog - Halo sobat, kali ini saya mau membagikan Tutorial Blog yaitu Cara Memasang Slide Button untuk Blogger. Untuk tips kali ini sobat hanya perlu meletakan kode CSS saja, berbeda dengan tips yang lain

ini menggunakan efek "hover" dan "inset" cukup sederhana sehingga tidak akan membebani kinerja blog sobat.

Berikut tutorialnya:

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 bisa sobat kreasikan kembali. terima kasih semoga bermanfaat