/* Gradient Success Button */
.btn-success-gd {
    color: #fff;
    background-image: linear-gradient(to right, #28a745, #218838);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-success-gd:hover {
        background-image: linear-gradient(to right, #218838, #1e7e34);
        color: #fff;
    }

    .btn-success-gd:focus, .btn-success-gd:active {
        background-image: linear-gradient(to right, #218838, #1e7e34);
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    }

/* Gradient Danger Button */
.btn-danger-gd {
    color: #fff;
    background-image: linear-gradient(to right, #dc3545, #c82333);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-danger-gd:hover {
        background-image: linear-gradient(to right, #c82333, #bd2130);
        color: #fff;
    }

    .btn-danger-gd:focus, .btn-danger-gd:active {
        background-image: linear-gradient(to right, #c82333, #bd2130);
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    }

/* Gradient Warning Button */
.btn-warning-gd {
    color: #212529;
    background-image: linear-gradient(to right, #ffc107, #e0a800);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-warning-gd:hover {
        background-image: linear-gradient(to right, #e0a800, #d39e00);
        color: #212529;
    }

    .btn-warning-gd:focus, .btn-warning-gd:active {
        background-image: linear-gradient(to right, #e0a800, #d39e00);
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
    }

/* Gradient Info Button */
.btn-info-gd {
    color: #fff;
    background-image: linear-gradient(to right, #17a2b8, #138496);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-info-gd:hover {
        background-image: linear-gradient(to right, #138496, #117a8b);
        color: #fff;
    }

    .btn-info-gd:focus, .btn-info-gd:active {
        background-image: linear-gradient(to right, #138496, #117a8b);
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
    }

/* Gradient Primary Button */
.btn-primary-gd {
    color: #fff;
    background-image: linear-gradient(to right, #007bff, #0069d9);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-primary-gd:hover {
        background-image: linear-gradient(to right, #0069d9, #005cbf);
        color: #fff;
    }

    .btn-primary-gd:focus, .btn-primary-gd:active {
        background-image: linear-gradient(to right, #0069d9, #005cbf);
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

/* Gradient Secondary Button */
.btn-secondary-gd {
    color: #fff;
    background-image: linear-gradient(to right, #6c757d, #5a6268);
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn-secondary-gd:hover {
        background-image: linear-gradient(to right, #5a6268, #495057);
        color: #fff;
    }

    .btn-secondary-gd:focus, .btn-secondary-gd:active {
        background-image: linear-gradient(to right, #5a6268, #495057);
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }