buttons.css
ASCII text
1button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button { 2box-shadow: var(--shadow-button); 3text-decoration: none; /* In case of links */ 4background-color: var(--color-button); 5color: var(--color-button-text) !important; 6cursor: pointer; 7border: var(--border-button); 8min-height: var(--height-button); 9padding: var(--padding-button); 10display: flex; 11width: fit-content; 12align-items: center; 13justify-content: center; 14gap: var(--gap-button); 15border-radius: var(--radius-button); 16font: var(--button-font); 17transition: var(--transitions-button); 18} 19 20iconify-icon { 21display: inline-flex; 22align-items: center; 23justify-content: center; 24font-size: 1em; 25} 26 27: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 */ 29background: transparent; 30user-select: auto; 31} 32 33:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button).button-flat { 34border: var(--border-flat-button); 35border-radius: var(--radius-flat-button); 36background-color: transparent; 37color: var(--color-primary) !important; 38box-shadow: var(--shadow-flat-button); 39} 40 41:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button):hover { 42border: var(--border-button-hover); 43box-shadow: var(--shadow-button-hover); 44background-color: var(--color-button-hover); 45color: var(--color-button-hover-text); 46} 47 48:is(button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button).button-flat:hover { 49border: var(--border-flat-button-hover); 50box-shadow: var(--shadow-flat-button-hover); 51background-color: var(--color-flat-button-hover); 52color: var(--color-flat-button-hover-text); 53}