dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1button[type] {
2 border: 15px solid transparent;
3 border-image: var(--button-border) 15 fill stretch;
4 block-size: calc(var(--font-size-button) + 30px);
5 color: rgb(var(--color-black));
6 font-family: var(--font-family-2);
7 font-size: var(--font-size-button);
8 font-weight: 400;
9 inline-size: fit-content;
10 line-height: 1;
11 padding: 0 5px;
12 text-box: trim-both ex alphabetic;
13 text-transform: uppercase;
14 text-shadow: 2px 2px rgb(var(--color-brown) / 0.3);
15 transition: border-image 100ms;
16
17 &:hover {
18 border-image-source: var(--button-border-hover);
19 }
20
21 &:disabled {
22 opacity: 0.5;
23 }
24
25 &[data-danger] {
26 &:not(:hover) {
27 border-image-source: var(--button-border-danger);
28 color: rgb(var(--color-red));
29 }
30 }
31
32 :where(.Bookmark) & {
33 --font-size-button: var(--font-size-3);
34 border-width: 10px;
35 block-size: calc(var(--font-size-button) + 20px);
36 }
37}