87 lines
2.2 KiB
CSS
87 lines
2.2 KiB
CSS
.button {
|
|
--button-bg: #342a21;
|
|
--button-color: #ffffff;
|
|
--button-hover-bg: #4b4b4a;
|
|
--button-hover-color: #ffffff;
|
|
--button-border-width: 3px;
|
|
--button-border-style: solid;
|
|
--button-border-color: var(--button-bg);
|
|
--button-radius: 0.5em;
|
|
|
|
--button-outline-color: #0a76f6;
|
|
--button-outline-offset: -3px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--button-gap, 0.5em);
|
|
padding: var(--button-padding, 0.7em 1.2em);
|
|
|
|
background: var(--button-bg);
|
|
color: var(--button-color);
|
|
|
|
border-width: var(--button-border-width);
|
|
border-style: var(--button-border-style);
|
|
border-color: var(--button-border-color);
|
|
border-radius: var(--button-radius);
|
|
|
|
text-decoration: none;
|
|
font-weight: var(--button-font-weight, 700);
|
|
font-size: var(--button-font-size, 1em);
|
|
letter-spacing: 0.05ch;
|
|
font-family: sans-serif;
|
|
line-height: 1.1; /* Set or buttons will be different sizes (<a>/<button>) */
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button svg {
|
|
height: var(--button-icon-size, 1.2cap);
|
|
width: auto;
|
|
flex: none;
|
|
}
|
|
|
|
/* Hover/focus/active */
|
|
.button:hover {
|
|
background: var(--button-hover-bg);
|
|
color: var(--button-hover-color);
|
|
}
|
|
|
|
.button:focus:focus-visible {
|
|
outline-width: var(--button-outline-width, var(--button-border-width));
|
|
outline-style: var(--button-outline-style, var(--button-border-style));
|
|
outline-color: var(--button-outline-color, var(--button-border-color));
|
|
outline-offset: var(
|
|
--button-outline-offset,
|
|
calc(var(--button-border-width) * 2)
|
|
);
|
|
}
|
|
|
|
.button:active {
|
|
transform: scale(99%);
|
|
}
|
|
|
|
/* Variants */
|
|
.button[data-button-variant="negative"] {
|
|
--button-bg: #b33c48;
|
|
--button-border-color: #a62f3d;
|
|
--button-hover-bg: #c24a56;
|
|
}
|
|
|
|
/* Outline buttons */
|
|
.button[data-outline-button] {
|
|
--button-bg: transparent;
|
|
--button-border-color: currentColor;
|
|
--button-color: currentColor;
|
|
}
|
|
|
|
/* Ghost buttons */
|
|
.button[data-ghost-button] {
|
|
--button-bg: transparent;
|
|
--button-border-color: transparent;
|
|
--button-color: currentColor;
|
|
--button-hover-bg: transparent;
|
|
--button-hover-bg: color-mix(in srgb, var(--color-neutral-500) 35%, transparent 65%);
|
|
--button-hover-color: currentColor;
|
|
--button-padding: .2em .4em;
|
|
}
|