atproto blogging
nonbinary.computer
1.button {
2 padding: 8px 18px;
3 border: 1px solid var(--color-border);
4 cursor: pointer;
5 font-size: 0.85rem;
6 font-weight: 600;
7 transition:
8 background-color 0.2s ease,
9 color 0.2s ease;
10}
11
12.button:focus-visible {
13 box-shadow: 0 0 0 2px var(--color-border);
14}
15
16.button[data-style="primary"] {
17 background-color: var(--color-primary);
18 color: var(--color-base);
19}
20
21.button[data-style="primary"]:hover {
22 background-color: var(--color-link);
23}
24
25.button[data-style="secondary"] {
26 background-color: var(--color-muted);
27 color: var(--color-base);
28}
29
30.button[data-style="secondary"]:hover {
31 background-color: var(--color-subtle);
32}
33
34.button[data-style="ghost"] {
35 background-color: transparent;
36 border: none;
37 color: var(--color-text);
38}
39
40.button[data-style="ghost"]:hover {
41 border: none;
42 background-color: var(--color-highlight);
43 color: var(--color-emphasis);
44}
45
46.button[data-style="outline"] {
47 border: 1px solid var(--color-border);
48 background-color: var(--color-surface);
49 color: var(--color-text);
50}
51
52.button[data-style="outline"]:hover {
53 background-color: var(--color-emphasis);
54}
55
56.button[data-style="destructive"] {
57 background-color: var(--color-error);
58 color: var(--color-base);
59}
60
61.button[data-style="destructive"]:hover {
62 background-color: var(--color-emphasis);
63}