Buttons

Description

Provides styled button components with multiple variants including standard buttons, alternate buttons with shadow effects, and different sizes. Buttons are designed for consistent styling across the application.

Usage

Use standard HTML button elements or anchor tags with button classes. Buttons automatically center themselves and have responsive behavior.

Available Options

• CSS Classes:
  • .btn - Standard button styling
  • .alt - Alternate button with shadow effect
  • .btn-small - Smaller padding button
  • .btn-large - Larger button with uppercase text
  • .text-btn - Text-only button style
  • .disabled - Disabled button state
• Automatic Features:
  • Centered alignment
  • Hover and focus states
  • Transition animations
  • Responsive sizing

Notes

• Buttons automatically center themselves horizontally
• Use .alt class for buttons with shadow effects
• .btn-small reduces padding for compact layouts
• .btn-large increases size and uses uppercase text
• .text-btn creates text-only button styling
• .disabled class provides disabled state styling
• Buttons work with both <button> and <a> elements
• Hover and focus states provide visual feedback
• Transition animations make interactions smooth
• Buttons are responsive and work on all screen sizes