# Button group

<figure><img src="https://853591514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuexK95idPyH8HU9t0Nkh%2Fuploads%2FANIgjkCVyAEmlqnVsEvQ%2Fimage.png?alt=media&#x26;token=8d3fd3cc-e142-4ade-bc93-49a25a97825c" alt=""><figcaption></figcaption></figure>

```html
<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.
