Pelajari cara membuat “grup tombol” vertikal dengan CSS.
Section Artikel
Grup Tombol Vertikal
Kelompokkan serangkaian tombol dalam group button vertikal:
Contoh:
<!Doctype html> <html> <style> .btn-group button { background-color: #4CAF50; border: 1px solid green; color: white; padding: 10px 24px; cursor: pointer; width: 50%; display: block; } .btn-group button:not(:last-child) { border-bottom: none; } .btn-group button:hover { background-color: #3e8e41; } </style> <body> <h1>Vertical Button Group</h1> <div class="btn-group"> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div> </body> </html>
Cara Membuat Grup Tombol Vertikal
Langkah 1) Tambahkan HTML
Contoh:
<div class="btn-group"> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div>
Langkah 2) Tambahkan CSS
Contoh:
.btn-group button { background-color: #4CAF50; /* Background warna hijau */ border: 1px solid green; /* Border warna hijau */ color: white; /* teks berwarna putih */ padding: 10px 24px; /* padding */ cursor: pointer; /* Ikon Pointer/hand */ width: 50%; /* Atur lebar jika dibutuhkan */ display: block; /* Buat tombol muncul di sisi bawah satu sama lain */ } .btn-group button:not(:last-child) { border-bottom: none; /* Menghindari border ganda */ } /* Tambahkan warna background saat mengarahkan kursor */ .btn-group button:hover { background-color: #3e8e41; }