Buttons
Bootstrap 5.3 .btn patterns plus Elementer extras: soft fills, gradients, glass surfaces, chips, and contrast-safe pairs for light and dark surfaces. The navbar theme toggle sets data-bs-theme on the document — semantic tokens and scoped CSS keep labels readable in both modes.
Markup and accessibility
Use type="button" for actions that are not submit buttons. Pair icon-only controls with aria-label. For toggleable interfaces prefer .btn-check on inputs with visible label.btn targets — that preserves keyboard and screen reader support without custom JavaScript.
Solid contextual
Theme-driven solid buttons
Standard Bootstrap variants map to CSS variables, so colors track data-bs-theme automatically.
Outline
Borders and hover fills
.btn-outline-* for quiet actions that gain weight on interaction.
Link-style (custom)
Text buttons that stay on-brand
Elementer link buttons mirror solid palette hues for quick “tertiary” actions.
Extended palette
Soft, gradient, glass, and outline-dashed
These classes are scoped to .buttons-page-bs5 in styles.css. Soft buttons use translucent RGBA fills; gradients and glow read well in both themes.
Soft tint
Gradient
Glass & minimal ghost
Dashed outline & elevated shadow
On dark surfaces
Contrast-safe pairings
Use .btn-light, .btn-outline-light, and glass for legible text on deep backgrounds. Independent of global theme — this card is always dark.
On light surfaces
Depth without noise
Outlined and dark solids anchor UI on pale panels. In dark document theme this panel shifts to a charcoal slab so examples stay meaningful.
Shape & size
Radii, pills, chips, and icon circles
Bootstrap sizing plus Elementer .btn-rounded / .btn-square, utility radii, and compact circular icon targets.
Icons & labels
Leading icons and balanced spacing
Keep icon + text order consistent; add me-2 or ms-2 for rhythm.
Badges & counts
Notifications inside buttons
Use position-relative on the button and absolutely position a .badge, or inline badges for segment counts.
Loading & disabled
Async feedback
Pair .spinner-border or .spinner-grow with aria-hidden on decorative spinners. Disabled controls omit pointer events via Bootstrap.
Block width
Full-width actions
.w-100 on narrow breakpoints stacks primary and secondary choices in forms or modals.
Groups & toolbar
Segmented controls and toolbars
.btn-toolbar groups related .btn-group clusters with spacing utilities.
Horizontal groups
Bootstrap 5 · btn-check
Radio and checkbox toggles
Native inputs stay in the tab order; labels styled as buttons provide the visual affordance.
Radio group
Check toggles
Single toggle
data-bs-toggle="button"
Toggles aria-pressed for a lone actionable button.
Vertical group
Stacked actions and nested dropdowns
.btn-group-vertical suits sidebars and narrow columns.
Card footer pattern
Actions in context
Typical dialog or card footer: neutral dismiss, primary commit. .bg-body-tertiary separates the action strip using theme-aware surface tokens.
Confirm changes
You have unsaved edits. Save before leaving this page?