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
.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;
}Live preview
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
.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 */Live preview
CSS Button Sizes
The CSS font-size property is used to define the font size for the text on a button:
Example
.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}Live preview
The CSS padding property is used to define the space between the text and the border of a button:
Example
.button1 {padding: 10px 24px;} .button2 {padding: 12px 28px;} .button3 {padding: 14px 40px;} .button4 {padding: 32px 16px;} .button5 {padding: 16px;}Live preview
CSS Rounded Buttons
The CSS border-radius property is used to add rounded corners to a button:
Example
.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}Live preview
CSS Button Borders
The CSS border property is used to define the border of a button:
Example
.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;}Live preview