86 lines
1.5 KiB
CSS
86 lines
1.5 KiB
CSS
.button,
|
|
button {
|
|
font: inherit;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
padding: 0.55rem 1.1rem;
|
|
cursor: pointer;
|
|
letter-spacing: 0.01em;
|
|
transition: all 140ms ease;
|
|
}
|
|
|
|
.button,
|
|
button[type="submit"] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button:hover,
|
|
button[type="submit"]:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
button:disabled,
|
|
.button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.button-secondary {
|
|
background: var(--surface-subtle);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.button-ghost {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--muted);
|
|
padding: 0.35rem 0.75rem;
|
|
}
|
|
|
|
.button-ghost:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.button-ghost.is-active {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.button-ghost.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.button-ghost.muted:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.button-danger {
|
|
background: #c44536;
|
|
border-color: #c44536;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button-danger:hover {
|
|
background: #a93a2d;
|
|
border-color: #a93a2d;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(196, 69, 54, 0.3);
|
|
}
|