Last updated
Button Accessibility Checklist
- Minimum touch target size: 44×44px (WCAG 2.5.5)
- Visible focus indicator for keyboard navigation
- Sufficient color contrast: 4.5:1 for text, 3:1 for large text
- Disabled state visually distinct with reduced opacity
- Loading state communicates progress (aria-busy="true")
- Icon-only buttons need aria-label for screen readers
The CSS Button Generator on TechConverter.me creates complete button styles with all states and transitions. Configure your colors, size, border-radius, and shadow, then copy the generated HTML and CSS directly into your project.
Examples
Example 1: Primary Solid Button
A standard primary action button with smooth hover and active transitions:
<button class="btn btn-primary">Get Started</button>
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
border-radius: 0.375rem;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease, box-shadow 0.15s ease,
transform 0.1s ease;
user-select: none;
}
.btn-primary {
background-color: #2563eb;
color: #ffffff;
border-color: #2563eb;
}
.btn-primary:hover {
background-color: #1d4ed8;
border-color: #1d4ed8;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.btn-primary:active {
background-color: #1e40af;
transform: translateY(1px);
box-shadow: none;
}
.btn-primary:focus-visible {
outline: 2px solid #4a90e2;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
Example 2: Outlined Secondary Button
An outlined button for secondary actions that doesn't compete with the primary CTA:
.btn-outline {
background-color: transparent;
color: #2563eb;
border: 1.5px solid #2563eb;
}
.btn-outline:hover {
background-color: #eff6ff;
border-color: #1d4ed8;
color: #1d4ed8;
}
.btn-outline:active {
background-color: #dbeafe;
transform: translateY(1px);
}
.btn-outline:focus-visible {
outline: 2px solid #4a90e2;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
Example 3: Ghost / Text Button
A minimal ghost button for tertiary actions with no background or border:
.btn-ghost {
background-color: transparent;
color: #374151;
border-color: transparent;
}
.btn-ghost:hover {
background-color: #f3f4f6;
color: #111827;
}
.btn-ghost:active {
background-color: #e5e7eb;
}
.btn-ghost:focus-visible {
outline: 2px solid #4a90e2;
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3);
}