CSSkel provides styles for buttons, including default and primary variants. These styles apply to button, input[type="submit"], input[type="reset"], input[type="button"], and a elements with the .button class.
Default buttons have a transparent background, a border, and text styling based on CSS variables. They change color and border on hover and focus.
<button>Default Button</button>
<a class="button" href="#">Default Link Button</a>
<input type="submit" value="Default Submit">
<input type="button" value="Default Input Button">Primary buttons use the .button-primary class, featuring a solid background and border in the accent color, with white text. They also change on hover and focus.
<button class="button-primary">Primary Button</button>
<a class="button button-primary" href="#">Primary Link Button</a>
<input class="button-primary" type="submit" value="Primary Submit">
<input class="button-primary" type="button" value="Primary Input Button">Button styles are controlled by the following CSS variables:
| Variable | Description | Default Value |
|---|---|---|
--button-height |
Height of buttons | 38px |
--button-padding |
Padding of buttons | 0 30px |
--button-fontsize |
Font size of buttons | 11px |
--button-weight |
Font weight of buttons | 600 |
--button-letter-spacing |
Letter spacing of buttons | 0.08rem |
--button-border-radius |
Border radius of buttons | 4px |