.button-custom {
    background: linear-gradient(135deg, #4F86F7, #8E2DE2);
    color: #fff; /* Warna teks */
    border: none; /* Hilangkan border */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: background-color 0.3s ease; /* Transisi warna latar belakang */
}

.button-custom:hover {
    background: linear-gradient(135deg, #8E2DE2, #000); /* Mengubah gradasi saat tombol dihover */
}

/* --------------------------------------------------- */
.button-outline {
    color: #fff; /* Warna teks */
    border: 2px solid #4F86F7; /* Outline dengan warna tertentu */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: border-color 0.3s ease; /* Transisi warna outline */
}

.button-outline:hover {
    border-color: #8E2DE2; /* Mengubah warna outline saat tombol dihover */
}

/* --------------------------------------------------- */

.bg-custom {
    background: linear-gradient(135deg, #4F86F7, #8E2DE2);
    color: #fff; /* Warna teks */
    border: none; /* Hilangkan border */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: background-color 0.3s ease; /* Transisi warna latar belakang */
}

.bg-custom:hover {
    background: linear-gradient(135deg, #8E2DE2, #000); /* Mengubah gradasi saat tombol dihover */
}

/* -------------------------------------------------------- */

.button-halaman {
    /* background: linear-gradient(135deg, #4F86F7, #8E2DE2); */
    background: linear-gradient(135deg, #4F86F7, #FFFFFF);
    color: #fff; /* Warna teks */
    border: none; /* Hilangkan border */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: background-color 0.3s ease; /* Transisi warna latar belakang */
}

.button-halaman:hover {
    background: linear-gradient(135deg, #FFFFFF, #4F86F7 ); /* Mengubah gradasi saat tombol dihover */
}


.button-edit {
    background: linear-gradient(135deg, #00FF00, #4F86F7);
    color: #fff; /* Warna teks */
    border: none; /* Hilangkan border */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: background-color 0.3s ease; /* Transisi warna latar belakang */
}

.button-edit:hover {
    background: linear-gradient(135deg, #4F86F7, #00FF00); /* Mengubah gradasi saat tombol dihover */
}

/* ======================================================================================== */
.button-merah {
    background: linear-gradient(135deg, #FF0000, #4F86F7); /* Mengubah warna latar belakang menjadi merah */
    color: #fff; /* Warna teks */
    border: none; /* Hilangkan border */
    padding: 10px 20px; /* Sesuaikan padding sesuai kebutuhan */
    border-radius: 5px; /* Sesuaikan border radius sesuai kebutuhan */
    cursor: pointer; /* Ubah kursor saat mengarah ke tombol */
    transition: background-color 0.3s ease; /* Transisi warna latar belakang */
}

.button-merah:hover {
    background: linear-gradient(135deg, #8E2DE2, #000); /* Mengubah gradasi saat tombol dihover */
}