Basic Button Styling

Html -

Css -

Stylish Button Colors

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

Html -

Css -

Change Button Sizes

Change the font size of a button : -

Html -

Css -

change the padding of a button : -

Html -

Css -

Rounded Buttons

Add Rounded Corners to a Button : -

Html -

Css -

Colored Button Borders

Add a colored border to a button : -

Html -

Css -

Shadow Buttons

Add Shadows to a button : -

Html -

Css -

Disabled Buttons

Add transparency to a button (creates a "disabled" look).

Html -

Css -

Button Groups

Button to create a button group : -

Html -

Css -

Bordered Button Group

Use the border property to create a bordered button group:

Html -

Css -

Vertical Button Group

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

Html -

Css -

Button on Image

Html -

Css -

Animated Buttons

Add an arrow on hover:

Html -

Css -

Add a "pressed" effect on click : -

Html -

Css -