BUTTON VERTICAL UNTUK MENU DAFTAR ISI
Lagi seneng bikin button atau tombol untuk membuat tampilan link lebih menarik daripada hanya melulu bentuk teks. Kali ini mencoba bikin button untuk membuat halaman daftar isi. Membuat tampilan halaman daftar isi menjadi tidak lugu hanya biasa saja seadanya. Dengan sentuhan sedikit HTML dan CSS menjadi lebih menarik dan interaktif.
HTML/CSS
<BACK
Button Sejajar Ke Bawah
Materi Belajar OZXSTUDIO
HTML/CSS
VISUAL STUDIO CODE:
<!DOCTYPE html>
<html>
<head>
<h4>
Button Sejajar Ke Bawah
</h4>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 3px solid green;
border-radius: 12px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 250px;
display: block;
margin: 10px;
}
.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
.btn-group .button:hover {
background-color: #3e8e41;
color: rgb(12, 226, 102);
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="btn-group">
<button class="button"><b>Button</b></button>
<button class="button"><b>Button</b></button>
<button class="button"><b>Button</b></button>
<button class="button"><b>Button</b></button>
</div>
</body>
</html>
