Cara Membuat Tombol Menggunakan Kode CSS

Membuat button atau tombol default biasanya menggunakan kode tag <button>, namun hasilnya sedikit kurang memuaskan.
Mungkin di beberapa custom template (pihak ketiga) sudah menerapkan custom button secara built-in dengan kode tertentu? Tapi bagaimana kalau gak ada?

Cara ini saya pelajari dari w3schools.com, kalau kamu ingin belajar dan memahami sendiri silahkan kunjungi website tersebut. Atau kamu bisa "nangkring" disini dan baca sampai habis...

Oke, langsung saja..

1. TAMBAHKAN KODE CSS PADA TEMPLATE

- Buka Blogger.com > Template > Edit HTML
- Copy kode CSS berikut dan Paste tepat diatas ]]></b:skin>
- Kalau gak mau pusing, kembali lagi ke awal, buka Blogger.com > Template > Sesuaikan. Pilih Tingkat Lanjut pada menu atas kemudian pilih Tambahkan CSS dan isi kode CSS berikut;

CSS

.button {background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7;}
.button5 {background-color: #555555;} /* Black */

- Penempatannya seperti gambar dibawah ini;

2. CARA MENGGUNAKAN/MEMAKAI CSS BUTTON

Untuk menggunakannya, tulislah kode berikut di HTML Editor manapun yang ada di blog, baik itu widget ataupun artikel/post. Cukup ketik <button class='button'>Teks disini</button> dan hasilnya seperti ini 

Untuk menggunakan warna lainnya, cukup ubah class='button' dengan nama button/id yang sudah ditambahkan pada CSS, misal button2, button3, button4 dan button5.

3. MENAMBAHKAN WARNA LAIN

Kalau kamu ingin menambahkan banyak warna, tambahkan id selanjutnya, contoh;
.button6 {background-color: #KODE_WARNA;} /* Nama Warna */ (deskripsi opsional).
Secara default, warna font dari CSS Button ini adalah warna putih (#ffffff), kalau kamu menambahkan warna background cerah gunakan kode color: black setelah kode background-color agar teks menjadi gelap dan dapat dibaca, contoh;
.button6 {background-color: #ecf0f1; color: black;} /* Bright Silver */.
Hasilnya akan seperti ini

.

- Kunjungi htmlcolorcodes.com untuk kode warna yang lengkap!

Selamat mencoba!!!

WARNING!!!

Jika button/tombol gagal atau gak sesuai dengan warna yang diinginkan, coba ganti kode CSS dengan kode berikut (spesifik target);
/* CSS Button */
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button2 {
    background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button3 {
    background-color: #f44336; /* Red */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button4 {
    background-color: #e7e7e7; color: black; /* Gray */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button5 {
    background-color: #555555; /* Black */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button6 {
    background-color: #ecf0f1; /* Silver */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
/* CSS Button */

INGAT!!! Jika memilih warna background cerah, ganti kode color: menjadi warna gelap (black). Juga sebaliknya, jika warna background gelap, ganti kode color: menjadi cerah (white).

_______________
featured image source: nobodyscrolls.co.uk