btn-primary / btn-secondary Button(s)

Button Styles

Buttons in this system follow a consistent, accessible design pattern that supports both light and dark themes. They are built with scalable font sizes, responsive spacing, and strong color contrast that meets WCAG 2.2 AA guidelines.

Button Types

• btn-primary: Solid background button using --color-uvu-green with white text. Used for high-emphasis actions.
• btn-secondary: Outlined button with no fill. Uses --color-uvu-green or --color-white for text based on theme.

Sizes

• .btn-xs – Extra btn-small buttons for compact UIs
• .btn-sm – btn-small buttons (default minimum)
• .btn-md – Medium buttons for standard usage
• .btn-lg – Large buttons for touch targets and hero sections

All sizes use responsive spacing via the clamp() function and scale btn-smoothly between breakpoints. Font size is defined by --fs-b-fluid, typically ranging from 18px to 20px.

Hover State

On hover, all buttons apply a shared hover color defined as:

.btn:hover {
  background-color: var(--color-wolverine-green);
  border-color: var(--color-wolverine-green);
  color: var(--color-white);
}

This ensures a consistent interaction style across light and dark themes. The hover color maintains a contrast ratio of ~4.99:1 against white text, meeting WCAG AA standards.

Dark Mode Support

Buttons inside elements with a .dark class automatically invert their theme for readability. btn-primary buttons become white with dark text; btn-secondary buttons retain white text with a colored border. Hover states remain consistent across both themes.

Accessibility

• All button text meets or exceeds 4.5:1 contrast.
• Minimum button font size is ~18px and scales fluidly.
• Icons use <i> and inherit color for contrast consistency.
• Line height and spacing are optimized for readability and tap targets.