Cara Memasang Tombol Rensponsive di Blogger

Memasang Slide Button di Blog - Jika kamu ingin punya button di artikel atau dalam halaman tertentu, disini saya akan kasih cara nya dengan meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog.

istilah "slide button" dalam bahasa Indonesia bisa memiliki dua arti tergantung konteksnya:

·        Komponen Elektronik: Dalam dunia elektronik, "slide button" bisa merujuk ke sebuah komponen tombol geser. Tombol ini biasanya berbentuk kecil dan pipih, dimana cara mengaktifkannya dengan menggesernya ke kiri atau kanan. Slide button banyak digunakan pada berbagai perangkat elektronik seperti remote control, pemutar musik portable, dan mainan elektronik.

·        Istilah umum: "Slide button" secara umum bisa diterjemahkan menjadi "tombol geser". Ini bisa digunakan untuk mendeskripsikan tombol apapun yang cara penggunaannya dengan menggesernya. Namun perlu diingat bahwa dalam Bahasa Indonesia istilah yang lebih umum digunakan adalah "tombol geser" atau "saklar geser".

Untuk memahami maksud "slide button" dengan lebih baik, perlu dilihat dari konteks penggunaannya. Jika Anda menemukan istilah ini pada manual perangkat elektronik, maka kemungkinan besar artinya adalah komponen elektronik tersebut.

 

Ok singkat saja kita langsung 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 bisa sobat kreasikan kembali. Semoga berhasil dan Foila, Anda sudah bisa menikmatinya, terima kasih.