CSS Styling Buttons
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 buttoncolor- defines the text color of a buttonborder- defines the border of a buttonpadding- defines the space between the text and the border of a buttonborder-radius- adds rounded corners to a buttonbox-shadow- adds shadows to a buttontext-align- centers the text of a buttonfont-size- defines the font size of the text on a buttontext-decoration- removes the underline for <a> elements used as buttonscursor- 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 »
Button Subpages
Continue learning about CSS buttons:
- Button Hover Effects - hover, shadow, disabled, width
- Button Groups - horizontal/vertical groups, animated buttons
