Buttons are designed to trigger actions and are most commonly used in conjunction with JavaScript. Therefore, in this CSS tutorial, we will learn how to style buttons, including their background and text colors. The examples demonstrate how to set button colors, borders, and more. Button sizes adapt to the font, so we do not need to set sizes manually unless we want them to vary. Buttons on a website can significantly improve the user experience.
| Property | Example | Description |
|---|---|---|
| Basic Styling | ||
background-color | background-color: #4CAF50; |
Sets the button background color |
color | color: white; |
Sets the button text color |
padding | padding: 12px 24px; |
Sets internal spacing (button size) |
border | border: none; |
Removes or sets the button border |
border-radius | border-radius: 8px; |
Rounded corners of the button |
cursor | cursor: pointer; |
Shows hand cursor on hover (clickable) |
font-size | font-size: 16px; |
Sets the button font size |
font-weight | font-weight: 600; |
Sets the font weight |
| Purpose-Based Buttons | ||
.primary | background-color: #4CAF50; color: white; |
Primary action (e.g., "Submit", "Save") |
.secondary | background-color: white; border: 2px solid #4CAF50; |
Secondary action (outlined button) |
.warning | background-color: #ff9800; color: white; |
Warning action (e.g., "Delete", "Caution") |
.neutral | background-color: #f5f5f5; color: black; |
Neutral action (e.g., "Cancel") |
| Sizes | ||
.small | padding: 8px 16px; font-size: 14px; |
Small button |
.medium | padding: 12px 24px; font-size: 16px; |
Medium button (default) |
.large | padding: 16px 32px; font-size: 18px; |
Large button |
| Shadows | ||
box-shadow | box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
Soft shadow below the button |
box-shadow (multi) | box-shadow: 0 2px 4px ..., 0 4px 8px ...; |
Multi-layer shadow for depth |
box-shadow: inset | box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); |
Inner shadow (pressed effect) |
| Shapes | ||
.circle | width: 100px; height: 100px; border-radius: 50%; |
Fully circular button |
.pill | border-radius: 50px; |
Pill shape (very rounded edges) |
.asymmetric | border-radius: 20px 5px; |
Asymmetrically rounded corners |
| States and Effects | ||
:hover | background-color: #45a049; transform: translateY(-2px); |
Change on mouse hover |
:active | transform: translateY(1px); |
Change on click (pressed effect) |
:disabled | opacity: 0.6; cursor: not-allowed; |
Disabled button (not clickable) |
transition | transition: all 0.3s ease; |
Smooth transition between states |
