Buttons

Default Buttons

Use the btn class to show the default button style.

Outline Buttons

Use the btn-outline- class with the below-mentioned variation to create a button with the outline.

Rounded Buttons

Use the rounded-pill class to make a rounded button.

Soft Buttons

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

Gradient Buttons

Use the button classes on an <a>, <button>, or <input> element.

Gradient Buttons 2

Use the bg-*-gradient class to create a gradient button.

Animation Button

Use the btn-animation class to create a animation effect.

Buttons with Label

Use the btn-label class to create a button with the label.

Buttons Sizes

Use btn-lg class to create a large size button and btn-sm class to create a small size button.

Buttons Toggle States

Use the data-bs-toggle="button" to toggle a button’s active state.

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link
Icon Buttons

Use btn-icon class to wrap icon in button

Block Buttons

Use the d-grid class to create a full-width block button.