Membuat dan Memasang Tombol Warna Warni Responsive

Membuat tombol menggunakan kode CSS sebenarnya sangat mudah, begitu juga dengan membuat tombol warna warni yang responsive

Daftar isi

Baca Juga

Membuat tombol menggunakan kode CSS sebenarnya sangat mudah, begitu juga dengan membuat tombol warna warni yang responsive. Tergantung bagaimana kita belajar kode CSS dan membuat tombol menggunakan kode tersebut. Kalau pun tidak bisa, cukup mencari panduannya diberbagai halaman blog yang ditampilkan oleh google. Cari panduannya dan mulai belajar untuk membuatnya.

Didalam dunia blogging itu segala sesuatu dimulai dari belajar dan belajar. Tidak peduli anda sudah sebagai seorang expert dalam dunia blog namun anda akan tetap belajar dan belajar. Karena ketika anda mulai tertarik untuk mendalami tentang blog, maka anda tidak hanya tertuju pada sekedar membuat artikel saja.

Akan tetapi semakin kesini anda juga akan mulai belajar untuk mengetahui segalanya tentang blog. Termasuk untuk mempelajari cara membuat dan memasang tombol warna dengan menggunakan kode CSS dan HTML.

Seperti yang akan saya bahas pada artikel ini, button atau tombol yang dipasang dalam blog memiliki berbagai jenis dan bentuk. Ada yang hanya satu tombol, dua, bahkan beberapa tombol bisa digunakan dalam satu kode yang dibuat. Misalkan tombol warna warni ini, tombol ini hanya menggunakan kode CSS yang sangat sederhana dan mudah dipahami.

Meskipun nantinya terdapat banyak tombol, dengan kode CSS ini anda juga bisa menggunakannya untuk membuat satu tombol saja. Sebelum mmebuat tombol ini, ada beberapa kriteria yang harus anda pahami dulu dengan tampilan tombol ini yaitu:

• Memiliki tampilan oval, namun bisa diganti dengan tampilan kotak.
• Sesuai dengan namanya, ada berbagai warna dengan tampilan gradiasi yang sangat cantik.
• Tampilan responsive yaitu lebar tombol mengikuti panjang teks yang digunakan.
• Bisa disisipkan link atau tautan.
• Menggunakan kode CSS yang sangat sederhana.

Bagaimana cata membuat tombol warna warni ini?

Sebelum membuat tombol ini, coba perhatikan 2 contoh demo dibawah ini yang saya pasang langsung didalam artikel ini. Jika anda tertarik untuk memnggunakan tombol seperti itu, silahkan terapkan kedalam blog anda. Tombol ini bisa digunakan dihampir semua bagian halaman blog anda, termasuk dibagian widget kolom sidebar blog.

Selain itu, karena tombol ini menggunakan kode CSS yang harus anda pasang kedalam kode template blog anda, maka alangkah baiknya anda untuk mengetahui cara memasang kode kedalam template blog. Dengan mengetahui caranya, maka anda dengan mudah untuk mengedit dan mengetahui tata letak kode CSS didalam template blog anda.

Selanjutnya, ikuti beberapa langkah dibawah ini untuk membuat dan memasang tombol warna warni di blog anda. Setiap tahapan ada beberapa penjelasan yang bisa memudahkan adan untuk mengganti setiap kode yang anda inginkan. Sehingga tombol yang dibuat bisa menyesuaikan dengan keinginan anda.

Simpan kode CSS dibawah ini kedalam kode template blog anda:

Didalam kode CSS ini, saya menggunakan flex-wrap untuk mengatur item flex menjadi satu baris atau tidak secara fleksibel. Dengan aturan 1 banding 1 untuk setiap elemen yang digunakan, dalam hal ini adalah tombol.

Untuk mengatur tampilan lebar dari kolom yang digunakan untuk tombol, anda bisa mengganti kode width:300px sesuai dengan keinginan anda. Dan untuk memperbesar tampilan tombol, mengganti margin dan padding yang digunakan yaitu margin:5px;padding:10px;. Sedangkan untuk mengganti bentuk tampilan tombol, ganti penggunaan bordernya yaitu border-radius:50px

.btn_wrapper{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;width:300px;margin:0 auto;min-height:auto;}
.btn_col{flex:1 1 auto;margin:5px;padding:10px;text-align:center;transition:0.5s;background-size:200% auto;color:#212121;text-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0 0 20px #eee;border-radius:50px;}
.btn_col:hover{background-position:right center;}
.btn_color1{background-image:linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);}
.btn_color2{background-image:linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);}
.btn_color3{background-image:linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);}
.btn_color4{background-image:linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);}
.btn_color5{background-image:linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);}

Setelah memasang kode CSS diatas kedalam template blog anda, simpan kode Html berikut ini. Kode dibawah ini bisa dipasang didalam artikel, dibagian sidebar ataupun ditempat yang ingin anda pasang. Untuk memasang kode Html ini kedalam widget atau kolom blog, baca petunjuknay di Cara Menambah Kolom Widget Blog

<div class="btn_wrapper">
  <a href="#" class="btn_col btn_color1">Warna 1</a>
  <a href="#" class="btn_col btn_color2">Warna 2</a>
  <a href="#" class="btn_col btn_color3">Warna 3</a> 
  <a href="#" class="btn_col btn_color4">Warna 4</a> 
  <a href="#" class="btn_col btn_color5">Warna 5</a>
</div>

Ganti href="#" dengan link atau tautan yang akan digunakan serta sisipkan item target="_blank" agar tautan terbuka di halaman baru.

Jika berhasil memasang kode tombol warna diatas, maka hasilnya akan terlihat seperti berikut:

Warna 1 Warna 2 Warna 3 Warna 4 Warna 5

Lebar tombol warna warni ini sangat responive yaitu mengikuti panjang pendeknya tulisan. Sehingga anda tidak perlu khawatir setiap teks atau anchor teks yang digunakan akan terputus. Namun sebagai saran, tetap gunakan teks yang pendek dan jelas. Contohnya adalah sebagai berikut:

Teks Teks Panjang Teks Sedang Teks Pendek Teks Dengan Tulisan

Dengan mempelajari kode CSS untuk tombol warna warni diatas, anda bisa melakukan cara yang sama dengan menggunakannya di blog anda. Atau anda juga bisa melakukan perubahan dari setiap kode yang anda inginkan seperti yang sudah saya jelaskan diatas. Selamat mencoba.