CSS Buttons

Learn how to style buttons using CSS.

Basic Button Styling

Output :

Button Colors

Output :

Button Sizes

Use the font-size property to change the font size of a button:

Output:

Use the padding property to change the padding of a button:

Note: "Extra Large" is simulated with custom padding classes (px-5 py-3) as there's no standard btn-xl class for explicit sizing in Bootstrap 5.x.

Output:

Rounded Buttons

Outline Rounded Buttons

Output:

Colored Button Borders

Use the border property to add a colored border to a button:

Output:

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.
Tip: Use the transition-duration property to determine the speed of the "hover" effect.

Output:

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Output :

Disabled Buttons

Use the opacity property to add transparency to a button (creates a "disabled" look).

Tip: You can also add the cursor property with a value of not-allowed, which will display a "no parking sign" when you mouse over the button.

Output:-:

Button Width

Button with width: 250px

Button with width: 50%

Button with width: 100%

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Output:-:

Button Groups

Remove margins and add float:left to each button to create a button group:

Output:-:

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Output:-:

Button on Image

Click Me

Output:-: