gmx.css/src/_button.css

A micro Material Design 3 based CSS-only framework.

img.btn {
    object-fit: cover;
    object-position: center;
    border: none;
}

:where(button, .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m3-scheme-primary);
    border: 1px solid transparent;
    border-radius: var(--m3-button-shape);
    color: var(--m3-scheme-on-primary);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    padding: .65rem 1.5rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: .1s;
}

:where(button, .btn):has(i) {
    padding: .65rem 1rem;
}

:where(button, .btn):hover {
    background: rgb(from var(--m3-scheme-primary) r g b / 90%);
    box-shadow: var(--m3-util-elevation-1);
}

:where(button, .btn) i {
    max-width: none;
}

:where(button, .btn) i * {
    font-size: 1.125rem;
    margin: 0 .5rem 0 0;
}

:where(button, .btn).tonal {
    background: var(--m3-scheme-secondary-container);
    color: var(--m3-scheme-on-secondary-container);
}

:where(button, .btn).tonal:hover,
.segmented input:checked+.btn:hover,
.chip:has(input:checked):hover {
    background: rgb(from var(--m3-scheme-primary) r g b / 20%);
}

:where(button, .btn).text,
:where(button, .btn).outline,
.segmented :where(button, .btn) {
    box-shadow: none;
    background: transparent;
    color: var(--m3-scheme-primary);
}

:where(button, .btn).text:hover,
:where(button, .btn).outline:hover,
.segmented :where(button, .btn):hover,
.tabs>label:has(input:checked):hover {
    box-shadow: none;
    background: rgb(from var(--m3-scheme-primary) r g b / 10%);
}

:where(button, .btn).outline,
.segmented {
    border: .0625rem solid var(--m3-scheme-outline);
}

:where(button, .btn).text {
    padding: .8rem .8rem;
}

:where(button, .btn).elevated {
    background: var(--m3-scheme-surface-container-low);
    color: var(--m3-scheme-primary);
    box-shadow: var(--m3-util-elevation-1);
}

:where(button, .btn).elevated:hover {
    background: rgb(from var(--m3-scheme-primary) r g b / 5%);
    box-shadow: var(--m3-util-elevation-2);
}

.segmented {
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--m3-segmented-button-shape);
}

.segmented>* {
    border-radius: 0;
}

.segmented>*:not(:last-child) {
    border-right: .0625rem solid var(--m3-scheme-outline);
}

.segmented input:checked+label {
    background: var(--m3-scheme-secondary-container);
}

.segmented input:checked+label:hover {
    background: var(--m3-scheme-secondary-container);
}

.segmented input:checked+label i:not(.checked) {
    display: none;
}

.segmented input:not(:checked)+label i.checked {
    display: none;
}

.segmented input {
    display: none;
}

.segmented label.btn {
    color: var(--m3-scheme-on-secondary-container);
}

.segmented label.btn:hover,
main>aside li:not(.active):hover i,
.menu>*:hover,
.chip:hover,
.tabs>*:hover {
    background: var(--m3-scheme-surface-container-highest);
}

:where(button, .btn).icon,
:where(button, .btn).fab:not(.extended) {
    aspect-ratio: 1/1;
    width: var(--size);
    height: var(--size);
}

:where(button, .btn).chip.icon {
    --size: 2rem;
}

:where(button, .btn).icon,
:where(button, .btn).fab.small {
    --size: 2.65rem;
}

:where(button, .btn).icon i *,
:where(button, .btn).fab i * {
    font-size: 1.5rem;
    margin-right: 0;
}

:where(button, .btn).fab.small {
    border-radius: var(--m3-fab-small-shape);
}

:where(button, .btn).fab {
    box-shadow: var(--m3-util-elevation-2);
    --size: 3.5rem;
    border-radius: var(--m3-fab-normal-shape);
}

:where(button, .btn).fab.large {
    --size: 5.5rem;
    border-radius: var(--m3-fab-large-shape);
}

:where(button, .btn).fab.large i * {
    font-size: 2.5rem;
}

:where(button, .btn).fab.extended {
    width: auto;
}

:where(button, .btn).fab.extended i * {
    margin-right: .5rem;
}