CSS Level 1 - Button Styling Reference

0. Plain button - no CSS

This is the browser default button with absolutely no CSS. We only wrote the HTML:

<button>Click Me!</button>

1. Text Color

color: red;

2. Background Color

background-color: black;

3. Width & Height

width: 200px;
height: 50px;

4. Border

border-color: red;
border-width: 5px;
border-style: solid;

5. Border Radius

border-radius: 7px;

6. Font Styling

font-size

font-size: 24px;

font-weight

font-weight: 800;

font-family

font-family: "Courier New", monospace;

7. Hover (Bonus)

Minimal hover example: only background and text color change on hover.

button{
  background-color: white;
}
button:hover{
  color: white;
  background-color: black;
}