demos for spacedust
bad-example.com
1button,
2a.button {
3 border-radius: 0.5rem;
4 border: 1px solid transparent;
5 color: inherit;
6 padding: 0.6em 1.2em;
7 font-size: 1em;
8 font-weight: 500;
9 font-family: inherit;
10 background-color: #0b0d0f;
11 cursor: pointer;
12 border: 1px solid hsla(0, 0%, 50%, 0.3);
13 border-bottom-color: hsla(0, 0%, 0%, 0.3);
14 border-right-color: hsla(0, 0%, 0%, 0.3);
15 box-shadow: 0 42px 42px -42px inset #221828;
16}
17button:hover,
18a.button:hover {
19 border-color: #646cff;
20}
21button:focus,
22button:focus-visible,
23a.button:focus,
24a.button:focus-visible {
25 outline: 4px auto -webkit-focus-ring-color;
26}
27
28button.subtle {
29 background: transparent;
30 border: none;
31 margin: 0;
32 padding: 0;
33 font: inherit;
34 box-shadow: none;
35}
36button.bad {
37 color: tomato;
38}
39
40.button-group {
41 display: flex;
42 overflow-x: auto;
43 /*justify-content: center;*/
44 max-width: 100%;
45}
46.button-group button:not(:first-child) {
47 border-top-left-radius: 0;
48 border-bottom-left-radius: 0;
49 border-left-width: 0.5px;
50}
51.button-group button:not(:last-child) {
52 border-top-right-radius: 0;
53 border-bottom-right-radius: 0;
54 border-right-width: 0.5px;
55}
56.button-group > button {
57 color: #888;
58}
59.button-group > button.current {
60 font-weight: bold;
61 /*color: #88cc77;*/
62 color: skyblue;
63 box-shadow: 0 -42px 42px -42px inset #221828;
64}