Flash cards
Review the key moves
What is the main idea behind CSS Styling Buttons?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-color: red;Put the learning moves in the order that makes the concept easiest to apply.
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