Buttons are fundamental elements in web design, providing users with interactive features. To enhance user experience, it’s crucial to design button states effectively. This guide will walk you through creating stylish, responsive button states using CSS.
Button States Overview
Button states include:
- Normal: Default appearance.
- Hover: When a user places the cursor over the button.
- Active: When the button is clicked.
- Focus: When the button is selected via keyboard navigation.
- Disabled: When the button is not interactive.
CSS Styling for Button States
/* Base button style */
.btn {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}/* Hover state */
.btn:hover {
background-color: #0056b3;
}/* Active state */
.btn:active {
background-color: #004080;
transform: scale(0.98);
}/* Focus state */
.btn:focus {
outline: none;
box-shadow: 0 0 5px rgba(0,123,255,0.5);
}/* Disabled state */
.btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}Results
Further Reading
https://dev.to/elizabethschafer/designing-button-focus-states-for-better-usability-gm2