Loading lesson path
Concept visual
Start at both ends
Overview
With CSS, different HTML buttons can be styled in many ways. The most common CSS properties for styling buttons are:
Formula
background - colorFormula
- 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 cursorchanges the mouse cursor when hovering over the button
<button> element, the <input type="button"> element, or an <a> element styled as a button.
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;
}Formula
background - color property is used to define the background color of a button.color property is used to define the text color of a button.
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 */
Formula
font - size property is used to define the font size for the text on a button:10px 12px 16px 20px 24px
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;}
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
Buttons with different padding:.button1 {padding: 10px 24px;}.button2 {padding: 12px 28px;}.button3 {padding: 14px 40px;}.button4 {padding: 32px 16px;}.button5 {padding: 16px;}
Formula
border - radius property is used to add rounded corners to a button:2px 4px 8px 12px 50%
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%;}