CSS Buttons Example

Learn how to style buttons in CSS

Default Button CSS Button

Example:-

Button Colors

Use the background-color property to change the background color of a button or links:

Example:-

Button Sizes

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

Example:-

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example:-

Border Button Colored

To Use the border property for add a colored on border to button:

Example:-

Hoverable Buttons

To use the hover selector to change the style of a button when you move the mouse over it.

Example:-

Disabled Buttons

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

Example:-

Button Groups

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

Example:-

Bordered Button Group

To use the border property to create a bordered button group:

Example:-

Vertical Button Group

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

Example:-

Animated Buttons

Add an arrow on hover: