Button Element with semantic variants for all actions and contexts. This is the ONLY button system — all patterns must use these classes.
Context = Physical placement in the layout (standard page vs. glassy overlay/hero).
Theme = Site-wide user preference (light/dark mode toggle 🌙).
Below previews show each button in both contexts. Use the 🌙 toggle (top-right) to test how buttons look in both themes. Buttons should work correctly in all 4 combinations: Light+Standard, Light+Glassy, Dark+Standard, Dark+Glassy.
Main call-to-action button for primary user flows (booking, submitting forms, confirmations). Works in both standard and glassy contexts due to solid background.
For use on normal page surfaces (content areas, cards, dialogs)
<button class="btn btn--primary">Book Now</button>
<!-- Disabled state -->
<button class="btn btn--primary" disabled>Disabled</button>For use on dark overlays and hero sections
<button class="btn btn--primary">Book Now</button>
<!-- Disabled state -->
<button class="btn btn--primary" disabled>Disabled</button>
Outline button for secondary actions like "Cancel", "Back", or "Skip".
Use .btn--secondary for standard contexts and .btn--secondary-glass for glassy contexts.
For use on normal page surfaces (content areas, cards, dialogs)
<button class="btn btn--secondary">Cancel</button>For use on dark overlays and hero sections
<button class="btn btn--secondary-glass">Contact Us</button>
Text-only button for low-priority actions. No border, minimal background on hover.
Use .btn--tertiary for standard contexts and .btn--tertiary-glass for glassy contexts.
For use on normal page surfaces
<button class="btn btn--tertiary">Skip</button>For use on dark overlays and hero sections
<button class="btn btn--tertiary-glass">Skip</button>Destructive action button for confirmations or deletions. Use sparingly for actions with permanent consequences. Works in both contexts due to solid background.
For use on normal page surfaces
<button class="btn btn--danger">Delete</button>For use on dark overlays and hero sections
<button class="btn btn--danger">Delete</button>
Square button for icon-only actions. Always include
aria-label or title for accessibility.
Use .btn--icon for standard contexts and .btn--icon-glass for glassy contexts.
For use on normal page surfaces
<button class="btn btn--icon" title="Close" aria-label="Close">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>For use on dark overlays and hero sections
<button class="btn btn--icon-glass" title="Close" aria-label="Close">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>Button sizes for different contexts and visual hierarchies. Size modifiers work with all button variants.
Normal page surfaces
Dark overlays and hero sections
<button class="btn btn--primary btn--xs">Extra Small</button>
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary">Normal</button>
<button class="btn btn--primary btn--lg">Large</button>
Use .btn--full to make buttons stretch to fill their
container. Useful for mobile forms and CTAs.
Works with all button variants.
Normal page surfaces
Dark overlays and hero sections
<button class="btn btn--primary btn--full">Complete Booking</button>.btn--primary
for main CTAs (works in all contexts)
.btn--secondary
for actions in standard contexts
.btn--secondary-glass
on glassy contexts (dark overlays, hero sections)
.btn--tertiary
for low-priority actions in standard contexts
.btn--tertiary-glass
for low-priority actions in glassy contexts
.btn--icon
/ .btn--icon-glass
based on context
.btn--primary .btn--sm
disabled
attribute for unavailable actions
aria-label
on icon-only buttons
.offer-card-cta)
.btn--danger
for non-destructive actions
Buttons inside Cards, Forms, Modals, or any higher-level pattern
MUST use Button Element classes defined in
/assets/css/button.css. If you need a new button variant, add it to the Button Element
definition, not to the higher-level component.
All button styles are defined in:
/assets/css/button.css
Imported by: /assets/css/ui-system.css
Includes: Base styles, variant styles (primary, secondary, secondary-inverse, tertiary, danger), size modifiers (xs, sm, lg, xl), icon button, full-width variant, disabled states, hover/active transitions, dark mode support.