O botão, estilizado usando CSS Flexbox, inclui estilos primário, secundário e terciário, todos estruturados em CSS aninhado para maior clareza e facilidade de manutenção, com variações como:

• com texto
• com texto e ícone (esquerda/direita/esquerda e direita)
• com apenas ícone
• com status
• para largura total
• para tipo desativado

Código HTML:

Link

Button

Primary

Button text
Button text
Button text
Button text


Secondary

Button text
Button text
Button text
Button text


Tertiary

Button text
Button text
Button text
Button text


Width modifier
Categories
Categories
Categories

Disabled
Button text
Button text
Button text

Status

Código CSS:

/* ---------------------------------------------------------- */
/*                     Snippflow Button                       */
/* ---------------------------------------------------------- */

.sf-button {
    --sf-button-gap: 8px;
    --sf-button-padding-top: 12px;
    --sf-button-padding-bottom: 12px;
    --sf-button-padding-left: 16px;
    --sf-button-padding-right: 16px;
    --sf-button-border-radius: 8px;
    --sf-button-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    --sf-button-primary-color: #fff;
    --sf-button-primary-bg: #46a787;
    --sf-button-primary-border: #3f9b7d;
    --sf-button-primary-hover-color: #fff;
    --sf-button-primary-hover-bg: #3c9376;
    --sf-button-primary-hover-border: #378c70;

    --sf-button-secondary-color: #121924;
    --sf-button-secondary-bg: #F8F8F9;
    --sf-button-secondary-border: #cbd5e1;
    --sf-button-secondary-hover-color: #121924;
    --sf-button-secondary-hover-bg: #fff;
    --sf-button-secondary-hover-border: #cbd5e1;

    --sf-button-tertiary-color: #121924;
    --sf-button-tertiary-bg: transparent;
    --sf-button-tertiary-border: transparent;
    --sf-button-tertiary-hover-color: #121924;
    --sf-button-tertiary-hover-bg: #e0e5ea;
    --sf-button-tertiary-hover-border: transparent;

    --sf-button-tertiary-status: #c82020;
}

a.sf-button,
input[type="submit"].sf-button,
input[type="reset"].sf-button,
input[type="button"].sf-button,
button.sf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-button-gap);
    position: relative;
    box-sizing: border-box;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
    padding: var(--sf-button-padding-top) var(--sf-button-padding-right) var(--sf-button-padding-bottom) var(--sf-button-padding-left);
    border: 1px solid;
    border-radius: var(--sf-button-border-radius);
    white-space: nowrap;
    outline: unset;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &[aria-expanded="true"],
    &:hover {
        text-decoration: none;
    }

    /* Is fit  (100%)*/
    &.is-fit {
        width: 100%;
    }

    /*   Is fit margin */
    &   .is-fit {
        margin-top: 10px; /* btn under other is-fit btm */
    }

    /* Has status */
    &.has-status {
        :after {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background-color: var(--sf-button-tertiary-status);
            position: absolute;
            right: 5px;
            top: 5px;
            animation: sp-status-pulse 1s infinite ease-in-out alternate;
        }
    }

    /* Is disabled */
    &.disabled,
    &:disabled,
    &[aria-disabled="true"] {
        cursor: default;
        filter: saturate(0%);
        opacity: .7;
        background: transparent;
        transform: none;
        box-shadow: none;
        outline: none;

        &:hover {
            color: initial;
            pointer-events: none;
        }
    }

    /*  Icon */
     & > i {
        min-width: 18px;
        font-style: normal;
        text-align: center;
    }

    /* Has only icon */
    &.has-only-icon {
        padding: var(--sf-button-padding-top);
    }

    /* Primary button */
    &.is-primary {
        color: var(--sf-button-primary-color);
        background-color: var(--sf-button-primary-bg);
        border-color: var(--sf-button-primary-border);
        box-shadow: var(--sf-button-box-shadow);

        &:hover:not(:disabled) {
            color: var(--sf-button-primary-color);
            background-color: var(--sf-button-primary-hover-bg);
            border-color: var(--sf-button-primary-hover-border);
        }
    }

    /* Secondary button */
    &.is-secondary {
        color: var(--sf-button-secondary-color);
        background-color: var(--sf-button-secondary-bg);
        border-color: var(--sf-button-secondary-border);
        box-shadow: var(--sf-button-box-shadow);

        &:hover:not(:disabled) {
            color: var(--sf-button-secondary-color);
            background-color: var(--sf-button-secondary-hover-bg);
            border-color: var(--sf-button-secondary-hover-border);
        }
    }

    /* Tertiary button */
    &.is-tertiary {
        color: var(--sf-button-tertiary-color);
        background-color: var(--sf-button-tertiary-bg);
        border-color: var(--sf-button-tertiary-border);

        &:hover:not(:disabled) {
            color: var(--sf-button-tertiary-color);
            background-color: var(--sf-button-tertiary-hover-bg);
            border-color: var(--sf-button-tertiary-hover-border);
        }
    }

}

@keyframes sp-status-pulse {
    from { transform: scale(0.8); }
    to { transform: scale(1.1); }
}

Veja o seguinte Codepen para uma demonstração:

PS. Espero que seja útil ;)

Artigo completo: https://snippflow.com/snippet/flexbox-button-with-3-styles-and-variations/
Trechos CSS