Button group

This HTML snippet showcases two sets of button groups styled differently:

<h2 class="mb-2 mt-4">Button Groups</h2>

<!-- Button Group 1: Outlined Buttons with Custom Colors -->
<div class="btn-group">
    <a href="#" class="btn-outlined-orange text-orange text-hover-white">btn 1</a>
    <a href="#" class="btn-outlined-orange text-orange text-hover-white">btn 2</a>
    <a href="#" class="btn-outlined-orange text-orange text-hover-white">btn 3</a>
</div>

<!-- Button Group 2: Primary and Secondary Buttons -->
<div class="btn-group">
    <a href="#" class="btn-primary text-white">btn 1</a>
    <a href="#" class="btn-secondary text-white">btn 2</a>
    <a href="#" class="btn-primary text-white">btn 3</a>
</div>

Key Features

• Button Group Structure: Each group (<div class="btn-group">) contains multiple <a> elements representing buttons.

• Styling Variations:

  • Button Group 1: Uses btn-outlined-orange class for outlined buttons with orange border and text, changing to white text on hover (text-hover-white).

  • Button Group 2: Utilizes Bootstrap-like classes (btn-primary and btn-secondary) for primary and secondary buttons with white text on colored backgrounds (text-white).

Usage

• Flexibility: Customize button styles by adjusting classes (btn-primary, btn-secondary, btn-outlined-orange, etc.) to match your design requirements.

• Accessibility: Ensure buttons have meaningful text (btn 1, btn 2, btn 3), and consider adding href attributes for usability.

This setup provides a versatile foundation for creating visually appealing and functional button groups in your web projects.