Dito PriwantoPada seri belajar CSS bagian 22, kita telah mempelajari CSS Links dan bagaimana membuat link tidak hanya fungsional, namun menarik secara visual. Setelah memahami elemen Links tersebut, kini saatnya beralih ke elemen interaksi yang tak kalah penting dalam sebuah halaman web, yaitu CSS Button.
Tombol atau tag <button> dalam kode HTML adalah sebuah elemen yang dapat digunakan untuk membuat tombol interaktif pada halaman web. Tombol ini berfungsi untuk mengeksekusi atau menjalankan sebuah aksi, seperti mengirim formulir, mereset isian form, atau mengeksekusi perintah tertentu melalui kode JavaScript.
Tag <button> bersifat fleksibel karena dapat berisi teks, ikon, atau elemen HTML lainnya, serta mendukung berbagai atribut seperti type, disabled, dan onclick. Oleh karena itu, <button> sering digunakan sebagai komponen utama dalam interaksi pengguna pada website maupun aplikasi web.
Secara default, browser menampilkan tombol dengan tampilan standar berwarna abu-abu dan berbentuk kotak. Tampilan ini sering kali terlihat kurang menarik jika dipadukan dengan desain tema website yang sudah dibuat.
Nah, di seri panduan belajar CSS kali ini, kita akan membahas cara membuat CSS button agar tampilannya lebih menarik, serta mampu meningkatkan efektivitas CTA (Call to Action) pada website Anda.
Pengertian CSS Button
CSS Button adalah pengaturan gaya tombol pada halaman web menggunakan kode CSS. Dengan CSS, tampilan tombol dapat dikustomisasi agar lebih menarik, fungsional, dan sesuai dengan desain interface website.
Berikut contoh penulisan kode dalam bentuk html dan css.
<style>
.css-a-btn {
border: none;
color: white;
padding: 15px 32px;
background-color: #04AA6D;
}
.css-a-btn:hover {
background-color: #038756;
}
</style>
<button>Button Default</button>
<button class="css-a-btn">Button dengan CSS</button>Fungsi CSS Button
Secara umum, CSS Button digunakan untuk mengubah tampilan tombol HTML (biasanya elemen <button> atau <input type=”button”> ) agar terlihat lebih menarik, dan sesuai dengan desain website.
Dengan CSS, tombol dapat diatur dari segi warna, ukuran, bentuk, border, efek hover, hingga animasi, sehingga tidak hanya berfungsi sebagai elemen interaksi, tetapi juga menjadi bagian penting dari pengalaman pengguna dalam web modern.
Meskipun keduanya sama-sama bisa diklik, namun perbedaan utama antara tag HTML <a> dan <button> terletak pada fungsi dan tujuan penggunaannya. Berikut perbedaan secara umum.
Tag < a > (Link/Hyperlink)
Fungsi utama dari tag a atau sering disebut dengan link / hyperlink berfungsi sebagai Navigasi atau berpindah halaman dari halaman satu ke halaman lain atau ke file tertentu. Dan biasanya akan digunakan untuk mengarahkan pengguna ke:
- Halaman lain
- Bagian tertentu dalam halaman
- File atau URL eksternal
Ciri ciri nya :
- Selalu menggunakan atribut href.
- Jika tidak menggunakan href, maka tag <a> hanya tag biasa dan bukan sebuah link.
- Hanya dapat digunakan untuk perpindahan halaman dan tidak dapat digunakan untuk aksi.
Contoh penulisan kode nya:
<a href="https://rumahweb.com">Kunjungi Website</a>Berikut contoh ketika di akses di browser, dan ketika di klik akan mengarah ke halaman lain:
Kunjungi WebsiteFungsi utama dari tag button berfungsi untuk menjalankan sebuah aksi, seperti mengirim formulir, mereset isian form, atau mengeksekusi perintah tertentu melalui kode JavaScript atau kode php.
Dan biasanya akan digunakan untuk :
- Submit form / register
- Menjalankan kode seperti JavaScript, php
- Aksi interaktif (klik, simpan, hapus, dll)
Ciri ciri nya :
- Memiliki atribut dengan nama type=”button”, submit, atau reset.
- Tidak digunakan untuk navigasi ke halaman lain
- digunakan hanya untuk eksekusi atau menjalankan aksi.
Contoh kode html:
<button type="button">
Klik Saya
</button>Berikut contoh ketika di akses di browser:
Contoh Implementasi
Tidak jauh berbeda dengan penerapan kode menggunakan CSS Link, berikut adalah beberapa contoh sederhana untuk mengubah tampilan button dari standar default browser menjadi tombol modern yang responsif dan interaktif.
Anda dapat merubah style CSS untuk button agar tidak seperti default, dan juga efek feedback ketika mouse di hover agar terlihat lebih menarik, berikut contoh kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Button</title>
<style>
#cssBtn {
padding: 5px;
}
.css-button button {
display: block;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
margin-bottom:5px;
}
.css-button-green {
background-color:#04AA6D;
}
.css-button-biru {
background-color: #008CBA;
}
.css-button-14 {
font-size: 14px;
background-color: #f44336;
}
.css-button-16 {
font-size: 20px;
background-color: blueviolet;
}
.css-button-round-10 {
background-color: brown;
border-radius: 10px;
}
.css-button-round-20 {
background-color: darkblue;
border-radius: 20px;
}
button.css-button-border-green {
border: 2px solid #04AA6D;
color: #04AA6D;
background: white;
}
button.css-button-border-blue {
border: 2px solid #008CBA;
color: #008CBA;
background-color: white;
border-radius: 10px;
}
.css-button-widht-50 {
background-color: crimson;
width: 50%;
}
.css-button-widht-100 {
background-color: lightseagreen;
width: 100%;
border-radius: 10px;
}
.css-button-border-green:hover {
background-color: #04AA6D;
color: white;
}
.css-button-border-blue:hover {
background-color: #008CBA;
color: white;
}
.css-button-change-bg {
background-color: forestgreen;
}
.active {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="cssBtn" class="css-button">
<button class="css-button-green">Hijau</button>
<button class="css-button-biru">Biru</button>
<button class="css-button-14">14px</button>
<button class="css-button-16">16px</button>
<button class="css-button-round-10">Round 10px</button>
<button class="css-button-round-20">Round 20px</button>
<button class="css-button-border-green">Hijau</button>
<button class="css-button-border-blue">Biru</button>
<button class="css-button-widht-50">Lebar 50%</button>
<button class="css-button-widht-100">Lebar 100%</button>
</script>
</div>
</body>
</html>Dan jika di testing melalui browser tampilannya akan seperti berikut:
Anda juga dapat mengombinasikan tombol dengan elemen lain agar tampilannya lebih menarik bagi pengunjung website. Masih menggunakan konsep kode box pada artikel sebelumnya, berikut salah satu contoh yang dikombinasikan dengan elemen lain seperti ikon, box, link, dan button.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Icon</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<style>
.container {
display: flex;
justify-content: center;
background-color: #f0f8ff;
}
.container .box {
margin: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #dadada;
border-radius: 10px;
width: 150px;
}
.material-symbols-outlined {
font-size: 40px;
}
button.css-button-round-10 {
border-radius: 5px;
}
a.a-btn {
background-color: #334cff;
color: white;
text-decoration: none;
display: block;
padding: 5px;
border-radius: 5px;
margin-bottom: 6px;
text-align: center;
}
a.a-btn:hover {
background-color: #1729a5;
}
button.css-btn {
background-color: #ff3333;
color: white;
display: block;
padding: 5px;
border-radius: 5px;
margin-bottom: 6px;
border: none;
width: 100%;
cursor: pointer;
}
button.css-btn:hover {
background-color: #ab0909;
}
</style>
</head>
<body>
<div id="cssBtn" class="container">
<div class="box">
<span class="material-symbols-outlined">home</span>
<div><strong>Box Satu</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<hr>
<a class="a-btn" href="https://rumahweb.com/" target="_blank">Links</a>
<button class="css-btn" >Button</button>
</div>
<div class="box">
<span class="material-symbols-outlined">speed</span>
<div><strong>Box Dua</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<hr>
<a class="a-btn" href="https://rumahweb.com/" target="_blank">Links</a>
<button class="css-btn" >Button</button>
</div>
<div class="box">
<span class="material-symbols-outlined">search</span>
<div><strong>Box Tiga</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<hr>
<a class="a-btn" href="https://rumahweb.com/" target="_blank">Links</a>
<button class="css-btn">Button</button>
</div>
<div class="box">
<span class="material-symbols-outlined">settings</span>
<div><strong>Box Empat</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<hr>
<a class="a-btn" href="https://rumahweb.com/" target="_blank">Links</a>
<button class="css-btn">Button</button>
</div>
</div>
</body>
</html>Dan jika di testing melalui browser tampilannya akan seperti berikut:
Penutup
CSS button berperan penting dalam meningkatkan tampilan dan kualitas interaksi tombol pada sebuah website. Dengan memanfaatkan CSS, tombol tidak hanya berfungsi sebagai pemicu aksi, tetapi juga menjadi elemen visual yang menarik, konsisten, dan mudah dikenali oleh pengguna.
Penggunaan CSS button yang tepat dapat memperbaiki pengalaman pengguna, memperjelas fungsi tombol, serta mendukung desain antarmuka web yang modern dan profesional.
Demikian artikel kami tentang belajar CSS bagian 23 tentang CSS Button. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat belajar.
