@@include("./partials/title-meta.html", {"title": "Buttons"}) @@include('./partials/head-css.html')
@@include('./partials/topbar.html') @@include('./partials/sidenav.html')
@@include("./partials/page-title.html", {"subtitle":"UI", "title":"Buttons"})

#### Default Buttons

Use any of the available `<a>` , `<button>` , or `<input>` classes `.btn` to quickly create a styled button.

#### Button Rounded

Use `.rounded-pill` with a default button to give it pill-shaped rounded corners.

#### Button Outline

Use the `.btn-outline-**` classes to quickly create buttons with borders.

#### Button Outline Rounded

Use `.rounded-pill` with an outline button to give it pill-shaped rounded corners.

#### Soft Buttons

Use `btn-soft-**` class with the below-mentioned variation to create a button with the soft background.

#### Soft Rounded Buttons

Use the `btn-soft-**` class along with `.rounded-pill` to create a softly styled button with rounded corners.

#### Ghost Buttons

Use the `btn-ghost-**` class to create buttons with a transparent background that highlight with color on hover.

#### Ghost Rounded Buttons

Use `btn-ghost-**` with `.rounded-pill` for rounded ghost buttons that highlight on hover.

#### Gradient Buttons

Use the `.bg-gradient` class to apply a gradient style to buttons.

#### Gradient Rounded Buttons

Use the `.bg-gradient` and `.rounded-pill` classes to apply a gradient style with rounded edges to buttons.

#### Button Sizes

Want larger or smaller buttons? Use `.btn-lg` or `.btn-sm` to adjust the button size.

#### Disabled Buttons

Use the `disabled` attribute on a `<button>` to make it inactive and non-interactive.

#### Block Button

To create block-level buttons, add the `.d-grid` class to the parent `<div>` .

#### Toggle Button

Add `data-bs-toggle="button"` to toggle a button’s `active` state. For pre-toggled buttons, also add `.active` and `aria-pressed="true"` .

#### Icon Buttons

Icon only button. Use it when you want a button with just an icon and no text, ideal for compact UI elements or toolbars.

#### Button Tags

Use `.btn` classes with `<button>` , `<a>` , or `<input>` elements, though rendering may vary slightly across browsers.

Link

#### Button Group

Group multiple buttons together by wrapping them with the `.btn` class inside a `.btn-group` container. This helps align buttons side by side with consistent spacing and styling.

@@include('./partials/footer.html')
@@include('./partials/customizer.html') @@include('./partials/footer-scripts.html')