~ fantasy-btn styling ~
apply these properties to the button as needed.
The
hover/focus/active variants will be applied when
appropriate.
--text-color:<color>
--text-hover-color:...;
--text-focus-color:...;
--text-active-color:...;
--text-shadow:
text-shadow;
--text-hover-shadow:...;
--text-focus-shadow:...;
--text-active-shadow:...;
--border-bg:
background;Defaults to
`currentColor`
--border-hover-bg:...;
--border-focus-bg:...;
--border-active-bg:...;
--border-opacity:float
number in range
[0,1];
--border-hover-opacity:...;
--border-focus-opacity:...;
--border-active-opacity:...;
--inlay-bg:
background;Defaults to
`#8888`
--inlay-hover-bg:...;
--inlay-focus-bg:...;
--inlay-active-bg:...;
--inlay-opacity:float
number in range
[0,1];
--inlay-hover-opacity:...;
--inlay-focus-opacity:...;
--inlay-active-opacity:...;
--outline-size:<length>
--outline-hover-size:...;
--outline-focus-size:...;
--outline-active-size:...;
--outline-style:
outline-style;
--outline-hover-style:...;
--outline-focus-style:...;Default
is
solid
--outline-active-style:...;
--outline-color:<color>
--outline-hover-color:...;
--outline-focus-color:...;
--outline-active-color:...;
--outline-offset:<length>Default
varies with
size
--outline-hover-offset:...;
--outline-focus-offset:...;
--outline-active-offset:...;
the border can grow to any size element and retain its proportions too,see this one that
resizes:
PS:the size variants are setting a `--scale:<number>` var if you want
more control over the thickness and other defualt properties that use --scale.