@tolokoban/ui/lib/dist/view/Button/Button.module.css

React components with theme

.Button {
    --custom-color-main-alpha: #f908;
    --custom-color-main: #f90;
    --custom-color-text: #000;
    --custom-thickness: 0.125em;
    font: inherit;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s;
    position: relative;
    font-variant: small-caps;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    overflow: hidden;
    text-decoration: none;
}

.Button > * {
    flex: 0 0 auto;
}

.Button > div.label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.Button.icon {
    justify-content: space-between;
}

.Button:focus {
    outline-offset: var(--custom-thickness);
    outline-style: dotted;
    outline-width: var(--custom-thickness);
    outline-color: var(--custom-color-main);
}

.Button.elevated,
.Button.filled {
    background: var(--custom-color-main);
    color: var(--custom-color-text);
}

.Button.elevated {
    box-shadow: 0 0.125em 0.25em #0007;
}

.Button.outlined {
    border: var(--custom-thickness) solid var(--custom-color-main);
    color: var(--custom-color-main);
    background: transparent;
}

.Button.text {
    color: var(--custom-color-text);
    background: transparent;
}

.Button:disabled,
.disabled {
    cursor: default;
    box-shadow: none;
    opacity: 0.5;
    pointer-events: none;
    font-style: italic;
}

.Button:not(:disabled):active {
    transform: translateY(0.25em);
}

.Button.elevated:not(:disabled):active {
    box-shadow: 0 0.25em 0.5em #0005;
}

.Button:not(:disabled):hover {
    filter: brightness(150%);
    backdrop-filter: brightness(50%);
}

.Button.elevated:not(:disabled):hover,
.Button.filled:not(:disabled):hover {
    filter: brightness(120%);
    backdrop-filter: none;
}