27 June 2017

Cara Membuat Button Responsive 13 Gaya dengan CSS

Cara Membuat Button Responsive 13 Gaya dengan CSSButton atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css.

Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja.

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)
Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya :
  • 6 warna
    • Biru
    • Orange
    • Merah
    • Hijau
    • Ungu
    • Putih
  • 4 ukuran
    • XS (Extra Small)
    • SM (Small)
    • MD (Medium)
    • LG (Large)
  • 2 pengaturan
    • Block Buttons
    • Outline(Accessibility)

Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/.
Cara Membuat Tombol atau Button Responsive
Tampilan Gaya Button Slant, Unite, Float
Cara Membuat Tombol Berbagi [Share Button] Responsive di Bawah Postingan Blog
Tampilan Gaya Button Pill, Material - flat, Material - circle
Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger
Tampilan Gaya Button Fill, Gradient, Jelly
Cara Membuat Tombol Share Ringan dan Responsive di Blog
Tampilan Gaya Button Stretch, Minimal, Bordered
Membuat Tombol / Button Elegan dengan CSS
Tampilan Gaya Button Simple

Apabila sudah melihatnya, sekarang saya akan menunjukan cara memasangnya di blog. Untuk cara memasangnya, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Button Responsive 13 Gaya dengan CSS

1. Cara Memasang Button Responsive 13 Gaya dengan CSS di Blogger

  • Pilih button dan pengaturan yang di inginkan, setelah selesai pilih icon Download di pojok kanan atas pada button yang di pilih
Membuat Tombol Social Media Responsive
Cara Download Script CSS Button Responsive
  • Setelah mendownload, langsung buka file yang sudah di download tadi, kemudian copy semua Script CSS nya
Cara Membuat Tombol Share Melayang Responsive
Copy Semua Script yang sudah di download
  • Masuk ke akun Blogger kalian
  • Pilih menu Tema, kemudian pilih Edit HTML
  • Cari script ]]></b:skin>, kemudian masukan script yang sudah di copy tadi tepat di atasnya
  • Setelah selesai pilih Simpan tema.


2. Cara Memasang Button Responsive 13 Gaya dengan CSS di Postingan Blogger

  • Pilih Copy code pada button yang di pilih tadi
Cara Memasang Social Share Button Responsive dengan Counter di Blog
Pilih Copy code
  • Masuk ke akun Blogger kalian
  • Pilih menu POS, kemudian pilih Entri baru
  • Pilih tab HTML, kemudian klik CTRL + V, maka akan tampil seperti berikut
Membuat Social Share Button Responsive Tanpa JavaScript di Blog
CTRL + V
  • Setelah selesai pilih Publikasikan
  • Jika berhasil maka akan muncul tampilan button yang di inginkan.
Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog
Contoh tampilan Button jika berhasil


3. Cara Memasukan Link dan Mengubah Teks Button

  • Masuk ke artikel yang sudah di buat tadi
  • Masuk ke tab HTML
  • Silahkan masukan script berikut ini diantara button yang sudah di masukan
<a href="http://www.tutorialumum.com/">..........Script Button..........</a>
  • Catatan
    • Ganti www.tutorialumum.com dengan link yang kalian inginkan
    • Script di atas adalah sebagai pembungkus, contoh cara memasang script yang benar.
<a href="http://www.tutorialumum.com/"><button class="bttn-unite bttn-md bttn-primary">Medium</button></a>
  • Ganti teks yang ada di antara button yang sudah di masukan
<a href="http://www.tutorialumum.com/"><button class="bttn-unite bttn-md bttn-primary">Ganti Teks ini</button></a>
  • Catatan : Ganti teks yang ada di tengah script button dengan teks yang kalian inginkan.
  • Jika selesai pilih Publikasikan atau Perbarui
  • Jika berhasil maka tampilannya akan seperti ini.
Cara Membuat Tombol di HTML Menggunakan Tag Button
Tampilan button jika berhasil di ubah

Demikian tutorial yang lumayan panjang tapi sudah saya perjelas, sehingga memudahkan kalian untuk memasang atau mengubah button tersebut. Jika ada pertanyaan mengenai cara membuat button responsive 13 gaya dengan CSS tersebut, silahkan masukan di kolom komentar.

(Baca juga : Cara Membuat Tombol Demo dan Download Ringan Responsive di blogger)

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi blog Tutorial Umum.

7 comments

Lengkap banget, setelah cari sana cari sini akhirnya ketemu, button ane gak responsive, makasih ya

wah lumayan nih banyak pilihan botton nya, jadi gw gak bingung dan gk nyobain satu2 lagi, btw ini dibuat pae css kan gan?

mantap gan, ane coba nanti :D

wow, boleh di coba itu gan :D

iya gan ini pake CSS..

mantap gan,sangat membantu saya sebagai blogger

mantab bro ijin coba ya :D

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon