Gradient button
.action-button
The .action-button class is used to style action buttons that combine two visual
elements: an image (<img>) and a text (<span>). These buttons feature a horizontal
gradient background that enhances contrast for better readability. A shadow effect around the
button improves its prominence and creates a more interactive appearance. On hover, the gradient
reverses direction, providing immediate visual feedback to the user. Images within the buttons
are styled with drop-shadow filters, creating a luminous, layered effect in dark mode, while the
text is padded to ensure consistent alignment and spacing.
.apply-button
The .apply-button class is tailored for simpler buttons containing text only. Despite
its minimalistic design, it shares the same horizontal gradient background as the .action-button
class, ensuring visual consistency across the interface. Its slightly reduced height reflects
its purpose as a less visually intensive button, fitting seamlessly into contexts requiring
subtle interactions. A small left margin (margin-left) separates it naturally from adjacent
elements, such as grouped controls. On hover, the gradient background also reverses, maintaining
the interactive design language.
Examples
Text-reveal
The Text-Reveal Button is a custom-styled button that combines an image and a hidden text label. By default, only the image is visible, providing a compact visual interface. When the button is hovered, the text is revealed next to the image, creating a user-friendly design. This component is ideal for scenarios where space is limited, and additional context is needed only during user interaction.
| Variable | Description | Default Value | Customization Example |
|---|---|---|---|
--text-reveal-height |
Controls the fixed height of the button, ensuring consistent vertical sizing across all instances. | calc(var(--font-size) * 1.5) |
--text-reveal-height: 2rem; |
--text-reveal-width |
Defines the initial width of the button before the text is revealed. | calc(var(--font-size) * 1.5) |
--text-reveal-width: 3rem; |
Examples
Toggle switch
The switch class provides a highly customizable toggle switch component, designed to be accessible, responsive, and visually adaptable to various themes. It allows developers to create switches with or without text labels, in both square and rounded styles.
This component supports dynamic theming through CSS custom properties (--variables)
and integrates seamlessly into modern web projects.
The following CSS custom properties can be adjusted to customize the appearance of the switch:
| Variable | Description | Default Value | Example |
|---|---|---|---|
--switch-width |
Defines the width of the entire switch. | calc(var(--font-size) * 5) |
--switch-width: 100px; |
--switch-height |
Sets the height of the switch. | calc(var(--font-size) * 2.8) |
--switch-height: 40px; |
--switch-bg-color |
Background color of the switch slider in both on and off states. | var(--inputs-bg-color) |
--switch-bg-color: #ccc; |
--switch-fg-color |
Color of the text or foreground elements on the switch. | var(--bg-color-alt) |
--switch-fg-color: #000; |
--switch-slider-off-color |
Background color of the slider in the "off" state. | var(--fg-color-alt) |
--switch-slider-off-color: #e0e0e0; |
--switch-slider-on-color |
Background color of the slider in the "on" state. | var(--fg-color) |
--switch-slider-on-color: #4caf50; |
--switch-slider-unselected-opacity |
Opacity of the un-selected state. | 0 |
--switch-slider-unselected-opacity: 10%; |