html body a.btn-3d,
html body button.btn-3d {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;

    --btn: #ffc45d;
    --btn-dark: #FCAF2E;
    --shadow: rgba(0, 0, 0, .22);

    display: inline-block;
    padding: 6px 40px;
    background: var(--btn);
    color: #111;
    font-weight: 800;
    letter-spacing: .3px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    background-clip: border-box;

    /* base shadow */
    transform: translateY(0);
    box-shadow:
        0 12px 0 var(--btn-dark),
        /* bottom bevel */
        4px 20px 0 var(--shadow);
    transition: transform .08s ease, box-shadow .08s ease;
}

html body .btn-3d *,
.btn-3d::before,
.btn-3d::after {
    border-radius: 0;
    background-clip: border-box;
}

/* kill outline but DO NOT kill shadow */
.btn-3d:focus,
.btn-3d:focus-visible {
    outline: none;
    /* remove blue ring */
}


/* pressed: smaller shadow, not zero */
a.btn-3d:active,
button.btn-3d:active,
a.btn-3d:active:focus,
button.btn-3d:active:focus {
    transform: translateY(6px);
    box-shadow:
        0 6px 0 var(--btn-dark),
        /* reduced bevel */
        6px 6px 0 var(--shadow);
    /* reduced drop */
}