Default Buttons
Use the
.btn
class on
<a>
,
<button>
, or
<input>
elements to quickly create a styled button.
Button Rounded
Add
.rounded-full
to buttons to give them smooth, pill-shaped corners.
Button Outline
Use the
.border-*
classes to create buttons with colored borders.
Button Outline Rounded
Apply
.rounded-full
to outline buttons to give them smooth, pill-shaped corners.
Soft Buttons
Use the
.bg-*/15
classes to create buttons with soft, tinted background colors.
Soft Rounded Buttons
Combine
.bg-*/15
with
.rounded-full
to create soft, pill-shaped buttons.
Ghost Buttons
Use ghost-style buttons to keep the background transparent and highlight the color on hover.
Ghost Rounded Buttons
Combine ghost-style buttons with
.rounded-full
to create rounded, transparent buttons that highlight on hover.
Gradient Buttons
Use gradient utility classes to apply smooth color transitions and create stylish gradient buttons.
Gradient Rounded Buttons
Combine gradient utilities with
.rounded-full
to create smooth, pill-shaped buttons with blended color transitions.
Button Sizes
Use
.btn-lg
or
.btn-sm
to quickly create larger or smaller button sizes.
Disabled Buttons
Add the
disabled
attribute to a
<button>
to prevent user interaction and visually indicate an inactive state.
Block Button
Add the
.w-full
class to make buttons span the full width of their container.
Icon Buttons
Icon buttons let you create compact controls using only an icon, or pair an icon with text for more clarity in toolbars and action areas.
Button Tags
The
.btn
class works with
<button>
,
<a>
, and
<input>
elements, though their appearance may vary slightly by browser.
Button Group
Use
inline-flex
to group buttons inside a single container, allowing them to align neatly side by side or stack vertically with consistent spacing.