Buttons

Here's a collection of styled buttons demonstrating various styles and colors:

<h2 class="mb-2">Buttons</h2>

<a href="#" class="btn">default btn</a>
<a href="#" class="btn-primary text-white">click me</a>
<a href="#" class="btn-secondary text-white">click me</a>
<a href="#" class="btn-error text-white">click me</a>
<a href="#" class="btn-info">click me</a>
<a href="#" class="btn-outlined-purple text-purple text-hover-white">click me</a>
<a href="#" class="btn-outlined-orange text-orange text-hover-white">click me</a>
<a href="#" class="btn-complement-purple">click me</a>
<a href="#" class="btn-complement-primary">click me</a>

Key Features

• Default Button: Simple button with default styling (btn class).

• Primary and Secondary Buttons: Colored buttons (btn-primary, btn-secondary) with white text.

• Error and Info Buttons: Highlighted buttons for indicating errors (btn-error) or providing information (btn-info).

• Outlined Buttons: Buttons with outlined borders and custom text colors (btn-outlined-purple, btn-outlined-orange). The text changes to white on hover (text-hover-white).

• Complement Buttons: Additional styled buttons (btn-complement-purple, btn-complement-primary) for complementary use cases.

Usage

• Customization: Modify classes (btn, btn-primary, btn-secondary, etc.) and colors (text-white, text-purple, text-orange, etc.) to fit your design requirements.

• Accessibility: Ensure buttons have descriptive text like "click me" and appropriate href attributes for usability.

• Responsive: Buttons adapt to different screen sizes and maintain visual consistency.

This setup provides a versatile set of buttons suitable for various UI needs, offering both aesthetic appeal and functionality in web applications.