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

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.

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:

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:

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:

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:

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:

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:

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:

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).

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:

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:

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: