Brilliant 3D Button

import styles from "./BrilliantButton.module.css";

export default function BrilliantButton({ children }) {
    return (
        <button className="button">
            {children}
        </button>
    );
}

.button{
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --green-400: #5DD573;
    --green-700: #17854C;
    --green-900: #08593F;

    font-family: "Host Grotesk", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    outline: none;
    border: none;
    border-radius: 9999px;

    background-color: var(--green-400);
    color: white;

    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 4px 0 0 var(--green-700);
    transform: translateY(0);
    transition: all 180ms var(--ease-out-quart);

    cursor: pointer;
    user-select: none;
}
.button:hover{
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 0 var(--green-700);
}
.button:active{
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 var(--green-700);
    transition-duration: 40ms;
}
.button:focus{
    outline: none;
}
.button:focus-visible{
    outline: 2px solid var(--green-900);
    outline-offset: 2px;
}
.button:disabled{
    filter: saturate(0);
    cursor: not-allowed;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
    .button{
        transition: none;
    }
}