~ 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.