CSS Buttons - W3Schools

CSS Styling Buttons ❮ Previous Next ❯

CSS Styling Buttons

With CSS, different HTML buttons can be styled in many ways.

The most common CSS properties for styling buttons are:

• background-color - defines the background color of a button
• color - defines the text color of a button
• border - defines the border of a button
• padding - defines the space between the text and the border of a button
• border-radius - adds rounded corners to a button
• box-shadow - adds shadows to a button
• text-align - centers the text of a button
• font-size - defines the font size of the text on a button
• text-decoration - removes the underline for <a> elements used as buttons
• cursor - changes the mouse cursor when hovering over the button

Buttons are typically created with the HTML <button> element, the <input type="button"> element, or an <a> element styled as a button.

CSS Basic Button Styling

Default Button CSS Button

Example

A basic button styling for different HTML elements:

.button { background-color: red; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } Try it Yourself »

CSS Button Colors

The CSS background-color property is used to define the background color of a button.

The CSS color property is used to define the text color of a button.

Green Blue Red Gray Black

Example

Buttons with different colors:

.button1 {background-color: #04AA6D;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ Try it Yourself »

CSS Button Sizes

The CSS font-size property is used to define the font size for the text on a button:

10px 12px 16px 20px 24px

Example

Buttons with different font size:

.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} Try it Yourself »

The CSS padding property is used to define the space between the text and the border of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

Buttons with different padding:

.button1 {padding: 10px 24px;} .button2 {padding: 12px 28px;} .button3 {padding: 14px 40px;} .button4 {padding: 32px 16px;} .button5 {padding: 16px;} Try it Yourself »

CSS Rounded Buttons

The CSS border-radius property is used to add rounded corners to a button:

2px 4px 8px 12px 50%

Example

Buttons with different rounded corners:

.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} Try it Yourself »

CSS Button Borders

The CSS border property is used to define the border of a button:

Green Blue Red Gray Black

Example

Buttons with different borders:

.button1 {border: 2px solid #04AA6D;}.button2 {border: 2px dotted #008CBA;}.button3 {border: 2px dashed #f44336;}.button4 {border: 1px solid #e7e7e7;}.button5 {border: 1px solid #555555;} Try it Yourself »

CSS Hoverable Buttons

The CSS :hover pseudo-class is used to change the style of a button when you mouse over it.

Tip: Use the CSS transition-duration property to determine the speed of the "hover" effect:

Green Blue Red Grey Black

Example

Buttons with different hover effects:

.button1:hover {background-color: #04AA6D;color: white;}.button2:hover {background-color: #008CBA;color: white;}.button3:hover {background-color: #f44336;color: white;}.button4:hover {background-color: #e7e7e7;color: black}.button5:hover {background-color: #555555;color: white;} Try it Yourself »

CSS Buttons With Shadow

The CSS box-shadow property is used to add a shadow to a button:

Shadow Button Shadow on hover

Example

Buttons with shadows:

.button1 {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}.button2:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)} Try it Yourself »

CSS Disabled Button

The CSS opacity property can be used 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:

Disabled Button

Example

A disabled button:

.disabledbtn { opacity: 0.6; cursor: not-allowed;} Try it Yourself »

CSS Button Width

By default, the size of a button is determined by its text content.

The CSS width property can be used to define a specific width for a button.

Tip: Use pixels to set a fixed width, or percent for a responsive width (e.g. 50% of its parent element).

250px 50% 100%

Example

Buttons with different widths:

.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 100%;} Try it Yourself »

CSS Horizontal Button Group

To create a group of buttons, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-wrap: wrap;, to let the buttons wrap on a new line on small screens:

Button Button Button Button

Example

.btn-group { display: flex; flex-wrap: wrap;}.button { background-color: #04AA6D; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer;}.btn-group .button:hover { background-color: dodgerblue;} Try it Yourself »

CSS Bordered Button Group

Use the border property to create a bordered button group:

Button Button Button Button

Example

.btn-group { display: flex; flex-wrap: wrap;}.button { background-color: #04AA6D; border: 1px solid green; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; }.btn-group .button:hover { background-color: dodgerblue;}.btn-group .button:not(:last-child) { border-right: none; /* Prevent double borders */} Try it Yourself »

CSS Vertical Button Group

To create a vertical button group, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-direction: column;, to let the buttons be displayed in a vertical way:

Button Button Button Button

Example

.btn-group { display: flex; flex-direction: column;} Try it Yourself »

Button on Image

Button Try it Yourself »

CSS Animated Buttons

Example

Add an arrow on hover:

Hover Try it Yourself »

Example

Add a "pressed" effect on click:

Click Try it Yourself »

Example

Fade in on hover:

Fade In Try it Yourself »

Example

Add a "ripple" effect on click:

Click Try it Yourself » ❮ Previous Next ❯ ★ +1 Sign in to track progress