Customisable Buttons

HTML

    <button type="button" class="button">Primary</button>
    <button type="button" class="button button-secondary">
            Secondary
    </button>
    <button type="button" class="button button-tertiary">
            tertiary
    </button>

SCSS

.button {
    --color-1: #2a816f;
    --white: #fff;
    --_bg: var(--color-1);
    --_bg-hover: var(--white);
    --_color: var(--white);
    --_color-hover: var(--color-1);
    --_border-thickness: 1px;
    --_border-type: solid;
    --_border-color: var(--color-1);
    --_border-color-hover: var(--color-1);

    background-color: var(--_bg);
    color: var(--_color);
    border: var(--_border-thickness) var(--_border-type) var(--_border-color);
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
        color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);

    &:focus {
        outline: none;
    }

    @media (hover: hover) {
        &:hover {
            background-color: var(--_bg-hover);
            color: var(--_color-hover);
            border-color: var(--_border-color-hover);
        }
    }

    &:focus-visible {
        background-color: var(--_bg-hover);
        color: var(--_color-hover);
        border-color: var(--_border-color-hover);
    }

    &-secondary {
        --color-1: #282828;
    }

    &-tertiary {
        --_bg: transparent;
        --_bg-hover: var(--color-1);
        --_color: var(--color-1);
        --_color-hover: var(--white);
        --_border-color-hover: var(--color-1);
    }
}