- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
💻 HTML Code
📏 Sizes
These classes apply only to buttons. Each one includes the base style and its own spacing.
.btn
.btn-sm
.btn-md
.btn-lg
🎨 Colors
Choose the button color by applying the corresponding class to your element.
.btn-{color}
.outline-{color}
.link-{color}
🧵 Type
Choose the button type by applying the matching class to your element.
.rounded-pill
📌 Button group
Use .btn-group to align multiple buttons on the same line
with consistent spacing. The container handles layout automatically.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--button-active-bg-color |
Background color applied when the button is active or pressed (default). |
--button-border-color |
Border color of the button. |
--button-border-radius |
Corner radius of the button. |
--button-border-style |
Border style of the button (solid, dashed, etc.). |
--button-border-width |
Thickness of the button border. |
--button-group-gap |
Gap between buttons inside a button group. |
--button-hover-bg-color |
Background color applied when hovering the button (default). |
--button-padding |
Default padding inside the button. |
--button-padding-lg |
Padding for large-sized buttons. |
--button-padding-md |
Padding for medium-sized buttons. |
--button-padding-sm |
Padding for small-sized buttons. |