This page documents button.css: ready-to-use CSS patterns.
Copy the HTML examples and customize the look with CSS variables.
No JavaScript is required for the button styles described below.
Summary:
- Gradient buttons:
.action-buttonand.apply-button - Text-reveal button:
.text-reveal-button - Toggle switch:
.switch+.switch-slider
Gradient buttons
.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.
CSS variables
| Variable | Description | Default Value | Customization Example |
|---|---|---|---|
--action-height |
Controls the height of .action-button (image + text). |
calc(var(--font-size) * 2.8) |
--action-height: calc(var(--font-size) * 3); |
--apply-height |
Controls the height of .apply-button (text-only). |
calc(var(--font-size) * 2.1) |
--apply-height: calc(var(--font-size) * 2); |
Note: in the examples below, the onclick handlers only trigger Wexa
accessibility helpers (contrast/theme). They are not required for the button styles.
Examples
These contrast/theme buttons require Whakerexa JavaScript for enabling contrast/theme switching.
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.
CSS behavior:
the button grows to width: auto on :hover and :focus.
The text label (<span>) is displayed on :hover.
| 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.6) |
--text-reveal-height: 2rem; |
--text-reveal-width |
Defines the initial width of the button before the text is revealed. | calc(var(--font-size) * 1.6) |
--text-reveal-width: 3rem; |
Examples
Toggle switch
The Toggle Switch is a custom-styled checkbox that mimics the behavior of an on/off switch. It is built using a standard HTML checkbox input and styled with CSS to create a slider effect. The switch includes optional text labels to indicate the state (OFF/ON) and can be customized via CSS variables for size, colors, and behavior. It supports focus styles for accessibility and provides a smooth transition for state changes.
| Variable | Description | Default Value | Customization Example |
|---|---|---|---|
--switch-width |
Total width of the switch | calc(var(--font-size) * 5) |
--switch-width: 6rem; |
--switch-height |
Total height of the switch | calc(var(--font-size) * 2.8) |
--switch-height: 3rem; |
--switch-bg-color |
Background color when switch is ON | var(--inputs-bg-color) |
--switch-bg-color: green; |
--switch-fg-color |
Background color when switch is OFF | var(--bg-color-alt) |
--switch-fg-color: red; |
--switch-slider-off-color |
Slider knob color when OFF | var(--fg-color-alt) |
--switch-slider-off-color: gray; |
--switch-slider-on-color |
Slider knob color when ON | var(--fg-color) |
--switch-slider-on-color: white; |
--switch-slider-unselected-opacity |
Opacity for unselected text label | 0 |
--switch-slider-unselected-opacity: 10%; |