File size: 1,715 Bytes
b565d01 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
button, .button {
appearance: none;
background: linear-gradient(15deg, var(--primary-color) 0%, var(--primary-color-hover) 35%);
color: white;
border: 1px solid transparent;
border-radius: var(--button-radius);
padding: var(--button-padding-y) var(--button-padding-x);
font-size: var(--button-font-size);
line-height: 1;
cursor: pointer;
display: inline-block;
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
/* Icon-only buttons: equal X/Y padding */
button:has(> svg:only-child),
.button:has(> svg:only-child) {
padding: var(--button-icon-padding);
}
button:hover, .button:hover {
filter: brightness(96%);
}
button:active, .button:active {
transform: translateY(1px);
}
button:focus-visible, .button:focus-visible {
outline: none;
}
button:disabled, .button:disabled {
opacity: .6;
cursor: not-allowed;
}
/* Ghost/Muted button: subtle outline, primary color text/border */
.button--ghost {
background: transparent !important;
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.button--ghost:hover {
color: var(--primary-color-hover) !important;
border-color: var(--primary-color-hover) !important;
filter: none;
}
/* Big button: larger padding and font size */
.button.button--big {
padding: var(--button-big-padding-y) var(--button-big-padding-x);
font-size: var(--button-big-font-size);
}
.button.button--big:has(> svg:only-child) {
padding: var(--button-big-icon-padding);
}
.button-group .button {
margin: 5px;
}
|