ASCII text
1
button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
2
box-shadow: var(--shadow-button);
3
text-decoration: none; /* In case of links */
4
background-color: var(--color-button);
5
color: var(--color-button-text) !important;
6
cursor: pointer;
7
border: var(--border-button);
8
min-height: var(--height-button);
9
padding: var(--padding-button);
10
display: flex;
11
width: fit-content;
12
align-items: center;
13
justify-content: center;
14
gap: var(--gap-button);
15
border-radius: var(--radius-button);
16
font: var(--button-font);
17
transition: var(--transitions-button);
18
}
19
iconify-icon {
21
display: inline-flex;
22
align-items: center;
23
justify-content: center;
24
font-size: 1em;
25
}
26
:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button)::selection {
28
/* Can select text in buttons, but selection won't appear to make it less disturbing */
29
background: transparent;
30
user-select: auto;
31
}
32
:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button).button-flat {
34
border: var(--border-flat-button);
35
border-radius: var(--radius-flat-button);
36
background-color: transparent;
37
color: var(--color-flat-button-text) !important;
38
box-shadow: var(--shadow-flat-button);
39
}
40
:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button):hover {
42
border: var(--border-button-hover);
43
box-shadow: var(--shadow-button-hover);
44
background-color: var(--color-button-hover);
45
color: var(--color-flat-button-hover-text);
46
}
47
:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button):is(.button-flat, .button-neutral):hover {
49
border: var(--border-flat-button-hover);
50
box-shadow: var(--shadow-flat-button-hover);
51
background-color: var(--color-flat-button-hover);
52
color: var(--color-flat-button-hover-text);
53
}
54
:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button).button-neutral {
56
color: inherit !important;
57
}
58
.button-round {
60
border-radius: var(--radius-round-button);
61
min-height: var(--size-round-button);
62
min-width: var(--size-round-button);
63
margin: var(--margin-round-button);
64
padding: var(--padding-round-button);
65
}
66
.fab {
68
max-height: var(--size-round-button);
69
max-width: var(--size-round-button);
70
}