CSS Styling Buttons
HTML buttons can take many different looks once CSS is applied.
These properties do most of the work:
background-color— fills the button with a background colorcolor— colors the button's textborder— draws the line around the buttonpadding— controls the gap between the text and the borderborder-radius— rounds off the button's cornersbox-shadow— gives the button a shadowtext-align— puts the button's text in the centerfont-size— controls how large the button's text appearstext-decoration— takes away the underline when an<a>element acts as a buttoncursor— swaps the mouse cursor while it hovers on the button
Three elements typically serve as buttons: <button>, <input type="button">, and an <a> with button styling.
CSS Basic Button Styling
Any HTML element can pass for a button once it has a few CSS properties: a background color, some padding, a text color, and no default border.
Example
Basic button styling, shown on different HTML elements:
Prompt
Create a page showing a default unstyled button and a CSS-styled button side by side. The styled button should have a red background, white text, no border, 15px 32px padding, centered text, no text decoration, inline-block display, 16px font size, and a pointer cursor. Use a element for the default and an element for the styled one.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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;
}
</style>
</head>
<body>
<h2>CSS Styling Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">CSS Button</a>
</body>
</html>
CSS Button Colors
Two properties handle color here: background-color for what sits behind the text, and color for the text itself.
Example
Each button here has its own background color:
Prompt
Create a page with five buttons in a row, each with a different background color: green (#04AA6D), blue (#008CBA), red (#f44336), gray (#e7e7e7 with black text), and black (#555555). All buttons share a base style with white text, no border, 15px 32px padding, centered text, 16px font size, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button2 {background-color: #008CBA;}
.button3 {background-color: #f44336;}
.button4 {background-color: #e7e7e7; color: black;}
.button5 {background-color: #555555;}
</style>
</head>
<body>
<h2>Button Colors</h2>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
CSS Button Sizes
Size comes from two properties. font-size scales the text on the button, and padding adjusts how much room lies between that text and the border.
Font size buttons
The font size changes from one button to the next:
Prompt
Create a page with five buttons showing different font sizes: 10px, 12px, 16px, 20px, and 24px. All buttons share a base style with green (#04AA6D) background, white text, no border, 15px 32px padding, centered text, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>
Padding buttons
Here the padding value is what differs:
Prompt
Create a page with five buttons showing different padding values: 10px 24px, 12px 28px, 14px 40px, 32px 16px, and 16px. All buttons share a base style with green (#04AA6D) background, white text, no border, centered text, 16px font size, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>
<h2>Button Padding</h2>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>
</body>
</html>
CSS Rounded Buttons
Use border-radius to round a button's corners.
Example
Corners rounded by varying amounts:
Prompt
Create a page with five buttons showing different border-radius values: 2px, 4px, 8px, 12px, and 50%. All buttons share a base style with green (#04AA6D) background, white text, no border, 15px 32px padding, centered text, 16px font size, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>Rounded Buttons</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
CSS Button Borders
A button's border comes from the border property.
Example
The border style changes from one button to the next:
Prompt
Create a page with five buttons showing different border styles: 2px solid green (#04AA6D), 2px dotted blue (#008CBA), 2px dashed red (#f44336), 1px solid gray (#e7e7e7), and 1px solid dark gray (#555555). All buttons share a base style with white background, colored text matching their border, 15px 32px padding, centered text, 16px font size, and pointer cursor.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border: 2px solid #04AA6D; color: #04AA6D;}
.button2 {border: 2px dotted #008CBA; color: #008CBA;}
.button3 {border: 2px dashed #f44336; color: #f44336;}
.button4 {border: 1px solid #e7e7e7; color: black;}
.button5 {border: 1px solid #555555; color: #555555;}
</style>
</head>
<body>
<h2>Button Borders</h2>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>