Cara Memasang Tombol BUTTON Slide Di Blog

Setelah sebelumnya saya memposting cara mengatasi Tag H1 yang bermasalah, selanjutnya saya akan membagikan cara membuat tombol BUTTON di blog keren, dan simple.

Dan cara ini cukup mudah diterapkan di blog, berikut ini adalah cara memasangnya.
Pertama silahkan copy cssnya dibawah ini.

CSS#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;}

Silahkan sobat tempelkan CSS diatas tempat di atas </style>

Jika sudah selanjutnya sobat save.
Selanjutnya silahkan sobat copy code HTML dibawah ini untuk menggunakan Tombol BUTTONnya.

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

Jika sudah silahkan sobat coba codenya dan share post menggunakan tombol bottonnya dan lihat hasilnya sobat.

Selamat mencoba sobat, semoga bermanfaat, mungkin dari saya cukup kan sekian dulu, semoga bisa bermanfaat.

Terima kasih sobat sudah berkunjung di Blog Agus Gunawan Official semoga semua artikel yang saya bagikan bisa bermanfaat untuk kita semua.

Share this post