✔ 13 Gaya Button Download / Demo Keren Dan Responsive Untuk Blog

Button atau tombol link ialah 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 akan membagikan cara menciptakan button responsive 13 gaya dengan css.

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

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)
Ada beberapa pilihan untuk menentukan 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/.

Tampilan Gaya Button Slant, Unite, Float

Tampilan Gaya Button Pill, Material - flat, Material - circle

Tampilan Gaya Button Fill, Gradient, Ps

Tampilan Gaya Button Stretch, Minimal, Bordered

Tampilan Gaya Button Simple

Apabila sudah melihatnya, kini akan membuktikan cara memasangnya di blog. Untuk cara memasangnya, ikuti langkah-langkah dari berikut ini.
Cara Memasang Button Responsive 13 Gaya dengan CSS

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

Langkah pertama masuk ke https://bttn.surge.sh/
Pilih button dan pengaturan yang di inginkan, sehabis final pilih icon Download di pojok kanan atas pada button yang di pilih

Cara Download Script CSS Button Responsive
Setelah mend0wnl0ad, eksklusif buka file yang sudah di d0wnl0ad tadi, lalu copy semua Script CSS nya

Copy Semua Script yang sudah di d0wnl0ad
Masuk ke akun Blogger Sobat
Pilih sajian Tema, lalu pilih Edit HTML
Cari script ]]></b:skin>, lalu masukan script yang sudah di copy tadi sempurna di atasnya
Setelah final pilih Simpan tema.


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

Kembali lagi ke halaman https://bttn.surge.sh/
Pilih Copy code pada button yang di pilih tadi

Pilih Copy code
Masuk ke akun Blogger Sobat
Pilih sajian POS, lalu pilih Entri baru
Pilih tab HTML, lalu klik CTRL + V, maka akan tampil ibarat berikut

CTRL + V
Setelah final pilih Publikasikan
Jika berhasil maka akan muncul tampilan button yang di inginkan.

Contoh tampilan Button jikalau 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="aciknadzirah.blogspot.com/">..........Script Button..........</a>
Catatan :
Ganti omipoel.blogspot.com dengan link yang Sobat inginkan
Script di atas ialah sebagai pembungkus, pola cara memasang script yang benar.
<a href="aciknadzirah.blogspot.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="aciknadzirah.blogspot.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 Sobat inginkan.
Jika final pilih Publikasikan atau Perbarui
Jika berhasil maka tampilannya akan ibarat ini.

Tampilan button jikalau berhasil di ubah

Demikian tutorial yang tidak mengecewakan panjang tapi sudah perjelas, sehingga memudahkan Sobat untuk memasang atau mengubah button tersebut. Jika ada pertanyaan mengenai cara menciptakan 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 ini. Untuk tutorial yang lainnya dari , silahkan tetap kunjungi blog ini.

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: