button {
    font-family: verdana;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    color: darkolivegreen;
    
    width: 100px;
    padding: 7px 8px 7px 32px;
    border: 1px solid darkolivegreen;
    border-radius: 7px;
    margin-top: 8px;
    background-position: 8px;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out; /* Smooth animation */
}

button:hover {
    transform: scale(1.1); /* Enlarge the button on hover */
}

button.login {
    background-image: url(imej/signin.png);
    background-size: 16px 16px;
}

button.signup {
    background-image: url(imej/signup.png);
    background-size: 16px 16px;
}

button.batal {
    background-image: url(imej/delete.png);
    background-size: 16px 16px;
}

button.import {
    background-image: url(imej/import.png);
    background-size: 16px 16px;
}

button.tambah {
    background-image: url(imej/add.png);
    background-size: 16px 16px;
}

button.update {
    background-image: url(imej/update.png);
    background-size: 16px 16px;
}

button.merah {
    background-image: url(imej/red.png);
    background-size: 16px 16px;
}

button.biru {
    background-image: url(imej/blue.png);
    background-size: 16px 16px;
}

button.hijau {
    background-image: url(imej/green.png);
    background-size: 16px 16px;
}

button.hitam {
    background-image: url(imej/black.png);
    background-size: 16px 16px;
}

button.cetak {
    background-image: url(imej/printer.png);
    background-size: 16px 16px;
}

button.papar {
    background-image: url(imej/monitor.png);
    background-size: 16px 16px;
}

button.cari {
    background-image: url(imej/search.png);
    background-size: 16px 16px;
}

button.user {
    background-image: url(imej/user.png);
    background-size: 16px 16px;
}

button.tempah {
    background-image: url(imej/add.png);
    margin-left: 20px;
    background-size: 16px 16px;
}