CSS Buttons 🎨
Create beautiful, accessible, and interactive buttons with modern CSS techniques and best practices.
Why CSS Buttons Matter
Buttons are the primary interactive elements in web interfaces. Well-designed buttons improve user experience, guide users through workflows, and make your application feel polished and professional.
🎯 User Experience
Clear calls-to-action and intuitive interactions
♿ Accessibility
Keyboard navigation and screen reader support
📱 Responsive Design
Touch-friendly and mobile-optimized
Basic Button Styles
Common Button Types:
.btn-primary- Main call-to-action.btn-secondary- Secondary actions.btn-outline- Bordered style.btn-ghost- Minimal hover effect.btn-success/danger/warning- Semantic states
Basic Button Styles Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS Button Styles</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.button-group {
text-align: center;
padding: 1.5rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.button-title {
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.1rem;
}
/* Basic Button Styles */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
}
/* Solid Buttons */
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-secondary {
background: #6b7280;
color: white;
}
.btn-secondary:hover {
background: #4b5563;
transform: translateY(-2px);
}
.btn-success {
background: #10b981;
color: white;
}
.btn-success:hover {
background: #059669;
transform: translateY(-2px);
}
.btn-danger {
background: #ef4444;
color: white;
}
.btn-danger:hover {
background: #dc2626;
transform: translateY(-2px);
}
.btn-warning {
background: #f59e0b;
color: white;
}
.btn-warning:hover {
background: #d97706;
transform: translateY(-2px);
}
/* Outline Buttons */
.btn-outline-primary {
background: transparent;
color: #3b82f6;
border: 2px solid #3b82f6;
}
.btn-outline-primary:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
}
.btn-outline-secondary {
background: transparent;
color: #6b7280;
border: 2px solid #6b7280;
}
.btn-outline-secondary:hover {
background: #6b7280;
color: white;
}
/* Ghost Buttons */
.btn-ghost {
background: transparent;
color: #3b82f6;
border: 1px solid transparent;
}
.btn-ghost:hover {
background: #eff6ff;
border-color: #3b82f6;
}
/* Size Variants */
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.125rem;
}
.btn-xl {
padding: 1.25rem 2.5rem;
font-size: 1.25rem;
}
/* Disabled State */
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
/* Demo Section Styling */
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #667eea;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.9rem;
}
/* Icon Buttons */
.btn-icon {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-icon i {
font-size: 1.1em;
}
/* Block Button */
.btn-block {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 CSS Button Styles</h1>
<div class="demo-section">
<h2>Basic Button Variants</h2>
<div class="code-example">
/* Solid Buttons */<br>
.btn-primary - Primary action<br>
.btn-secondary - Secondary action<br>
.btn-success - Success state<br>
.btn-danger - Danger/delete action<br>
.btn-warning - Warning state
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Primary</div>
<button class="btn btn-primary">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Secondary</div>
<button class="btn btn-secondary">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Success</div>
<button class="btn btn-success">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Danger</div>
<button class="btn btn-danger">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Warning</div>
<button class="btn btn-warning">Click Me</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Outline & Ghost Buttons</h2>
<div class="code-example">
/* Outline & Ghost Variants */<br>
.btn-outline-* - Transparent with border<br>
.btn-ghost - Minimal hover effect
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Outline Primary</div>
<button class="btn btn-outline-primary">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Outline Secondary</div>
<button class="btn btn-outline-secondary">Click Me</button>
</div>
<div class="button-group">
<div class="button-title">Ghost Button</div>
<button class="btn btn-ghost">Click Me</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Button Sizes</h2>
<div class="code-example">
/* Size Variants */<br>
.btn-sm - Small button<br>
.btn-lg - Large button<br>
.btn-xl - Extra large button
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Small</div>
<button class="btn btn-primary btn-sm">Small Button</button>
</div>
<div class="button-group">
<div class="button-title">Default</div>
<button class="btn btn-primary">Default Button</button>
</div>
<div class="button-group">
<div class="button-title">Large</div>
<button class="btn btn-primary btn-lg">Large Button</button>
</div>
<div class="button-group">
<div class="button-title">Extra Large</div>
<button class="btn btn-primary btn-xl">Extra Large</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Button with Icons</h2>
<div class="code-example">
/* Icon Buttons */<br>
.btn-icon - Flex layout for icons<br>
Use with font icons or SVGs
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Download</div>
<button class="btn btn-primary btn-icon">
<i>⬇️</i> Download
</button>
</div>
<div class="button-group">
<div class="button-title">Send</div>
<button class="btn btn-success btn-icon">
<i>✉️</i> Send Email
</button>
</div>
<div class="button-group">
<div class="button-title">Delete</div>
<button class="btn btn-danger btn-icon">
<i>🗑️</i> Delete
</button>
</div>
<div class="button-group">
<div class="button-title">Block Button</div>
<button class="btn btn-primary btn-block">Full Width Button</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Button States</h2>
<div class="code-example">
/* Button States */<br>
:hover - Hover effect<br>
:active - Click state<br>
:disabled - Disabled state<br>
:focus - Focus state
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Normal</div>
<button class="btn btn-primary">Normal</button>
</div>
<div class="button-group">
<div class="button-title">Hover</div>
<button class="btn btn-primary" style="background: #2563eb;">Hover State</button>
</div>
<div class="button-group">
<div class="button-title">Active</div>
<button class="btn btn-primary" style="background: #1d4ed8; transform: scale(0.95);">Active State</button>
</div>
<div class="button-group">
<div class="button-title">Disabled</div>
<button class="btn btn-primary" disabled>Disabled</button>
</div>
</div>
</div>
</div>
<script>
// Add click effects
const buttons = document.querySelectorAll('.btn:not(:disabled)');
buttons.forEach(button => {
button.addEventListener('click', function(e) {
// Create ripple effect
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.cssText = `
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple 600ms linear;
width: ${size}px;
height: ${size}px;
left: ${x}px;
top: ${y}px;
pointer-events: none;
`;
this.style.position = 'relative';
this.style.overflow = 'hidden';
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
// Add CSS for ripple animation
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>Advanced Button Effects
Visual Effects
Create engaging buttons with gradients, shadows, animations, and interactive feedback that delight users.
Gradient backgrounds
3D depth effects
Hover animations
Interactive States
Implement loading states, toggle switches, and social buttons that provide clear feedback and enhance usability.
Loading spinners
Toggle switches
Social media styles
Advanced Effects Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Button Effects</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.button-group {
text-align: center;
padding: 2rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.button-title {
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.button-desc {
color: #718096;
font-size: 0.875rem;
margin-top: 0.5rem;
}
/* Base Button */
.btn-advanced {
display: inline-block;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
font-family: inherit;
}
/* Gradient Buttons */
.btn-gradient-1 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
}
.btn-gradient-1:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.btn-gradient-2 {
background: linear-gradient(45deg, #f093fb, #f5576c);
color: white;
}
.btn-gradient-2:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 87, 108, 0.4);
}
.btn-gradient-3 {
background: linear-gradient(45deg, #4facfe, #00f2fe);
color: white;
}
.btn-gradient-3:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}
/* 3D Buttons */
.btn-3d {
background: #3b82f6;
color: white;
border-bottom: 4px solid #1d4ed8;
transform: translateY(0);
}
.btn-3d:hover {
transform: translateY(-2px);
border-bottom-width: 6px;
}
.btn-3d:active {
transform: translateY(2px);
border-bottom-width: 2px;
}
/* Neumorphism Buttons */
.btn-neumorphism {
background: #f0f0f0;
color: #333;
border: none;
box-shadow: 5px 5px 10px #d9d9d9,
-5px -5px 10px #ffffff;
}
.btn-neumorphism:hover {
box-shadow: inset 5px 5px 10px #d9d9d9,
inset -5px -5px 10px #ffffff;
}
/* Glow Effect */
.btn-glow {
background: #10b981;
color: white;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
animation: glow 2s infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}
to {
box-shadow: 0 0 30px rgba(16, 185, 129, 0.8),
0 0 40px rgba(16, 185, 129, 0.6);
}
}
/* Border Animation */
.btn-border-anim {
background: transparent;
color: #3b82f6;
border: 2px solid #3b82f6;
position: relative;
}
.btn-border-anim::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
background: linear-gradient(45deg, #3b82f6, #10b981, #f59e0b, #ef4444) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
border-radius: 8px;
animation: borderRotate 3s linear infinite;
}
@keyframes borderRotate {
100% {
transform: rotate(360deg);
}
}
/* Shine Effect */
.btn-shine {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
position: relative;
overflow: hidden;
}
.btn-shine::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.btn-shine:hover::before {
left: 100%;
}
/* Pulse Animation */
.btn-pulse {
background: #ef4444;
color: white;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
/* Loading Button */
.btn-loading {
background: #6b7280;
color: transparent;
position: relative;
cursor: wait;
}
.btn-loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background: #10b981;
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
/* Social Media Buttons */
.btn-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.btn-facebook { background: #3b5998; }
.btn-twitter { background: #1da1f2; }
.btn-instagram { background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.btn-linkedin { background: #0077b5; }
.btn-social:hover {
transform: scale(1.1) rotate(5deg);
}
/* Floating Action Button */
.btn-fab {
width: 60px;
height: 60px;
border-radius: 50%;
background: #3b82f6;
color: white;
border: none;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
cursor: pointer;
transition: all 0.3s ease;
position: fixed;
bottom: 2rem;
right: 2rem;
}
.btn-fab:hover {
transform: scale(1.1) rotate(90deg);
box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}
/* Demo Section */
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #4facfe;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 Advanced Button Effects</h1>
<div class="demo-section">
<h2>Gradient Buttons</h2>
<div class="code-example">
/* Gradient Backgrounds */<br>
linear-gradient() for smooth color transitions<br>
Multiple color stops for vibrant effects
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Purple Gradient</div>
<button class="btn-advanced btn-gradient-1">Gradient 1</button>
<div class="button-desc">Smooth purple transition</div>
</div>
<div class="button-group">
<div class="button-title">Pink Gradient</div>
<button class="btn-advanced btn-gradient-2">Gradient 2</button>
<div class="button-desc">Vibrant pink to red</div>
</div>
<div class="button-group">
<div class="button-title">Blue Gradient</div>
<button class="btn-advanced btn-gradient-3">Gradient 3</button>
<div class="button-desc">Ocean blue tones</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>3D & Neumorphism</h2>
<div class="code-example">
/* 3D & Soft UI Effects */<br>
Border-bottom for 3D depth<br>
Box-shadow for neumorphism
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">3D Button</div>
<button class="btn-advanced btn-3d">Click Me</button>
<div class="button-desc">Depth with border</div>
</div>
<div class="button-group">
<div class="button-title">Neumorphism</div>
<button class="btn-advanced btn-neumorphism">Soft UI</button>
<div class="button-desc">Soft shadow effects</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Animated Effects</h2>
<div class="code-example">
/* CSS Animations */<br>
@keyframes for complex animations<br>
Transitions for smooth effects
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Glow Effect</div>
<button class="btn-advanced btn-glow">Glowing</button>
<div class="button-desc">Pulsing glow animation</div>
</div>
<div class="button-group">
<div class="button-title">Border Animation</div>
<button class="btn-advanced btn-border-anim">Animated</button>
<div class="button-desc">Rotating gradient border</div>
</div>
<div class="button-group">
<div class="button-title">Shine Effect</div>
<button class="btn-advanced btn-shine">Shine</button>
<div class="button-desc">Light sweep on hover</div>
</div>
<div class="button-group">
<div class="button-title">Pulse Animation</div>
<button class="btn-advanced btn-pulse">Pulse</button>
<div class="button-desc">Continuous pulse</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Interactive States</h2>
<div class="code-example">
/* Button States & Loading */<br>
:disabled for disabled state<br>
Loading animation for async actions
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Loading State</div>
<button class="btn-advanced btn-loading">Loading</button>
<div class="button-desc">Spinner animation</div>
</div>
<div class="button-group">
<div class="button-title">Toggle Switch</div>
<label class="toggle-switch">
<input type="checkbox">
<span class="toggle-slider"></span>
</label>
<div class="button-desc">On/off toggle</div>
</div>
</div>
</div>
<div class="demo-section">
<h2>Social & Special Buttons</h2>
<div class="code-example">
/* Special Button Types */<br>
Social media buttons<br>
Floating action buttons
</div>
<div class="button-grid">
<div class="button-group">
<div class="button-title">Social Buttons</div>
<div style="display: flex; gap: 1rem; justify-content: center;">
<button class="btn-social btn-facebook">f</button>
<button class="btn-social btn-twitter">t</button>
<button class="btn-social btn-instagram">ig</button>
<button class="btn-social btn-linkedin">in</button>
</div>
<div class="button-desc">Social media styles</div>
</div>
</div>
</div>
</div>
<!-- Floating Action Button -->
<button class="btn-fab">+</button>
<script>
// Toggle switch functionality
const toggle = document.querySelector('.toggle-switch input');
toggle.addEventListener('change', function() {
if (this.checked) {
console.log('Toggle switched ON');
} else {
console.log('Toggle switched OFF');
}
});
// Loading button demo
const loadingBtn = document.querySelector('.btn-loading');
setTimeout(() => {
loadingBtn.classList.remove('btn-loading');
loadingBtn.textContent = 'Loaded!';
loadingBtn.style.background = '#10b981';
loadingBtn.style.color = 'white';
}, 3000);
// Floating action button
const fab = document.querySelector('.btn-fab');
fab.addEventListener('click', function() {
alert('FAB Clicked!');
});
</script>
</body>
</html>Mobile-Optimized Buttons
Touch-Friendly Design
Mobile devices require larger touch targets (44px+), appropriate spacing, and visual feedback that works well on touch screens.
min-width: 44px; min-height: 44px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
Mobile-Optimized Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-Optimized CSS Buttons</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 1rem;
}
.container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.8rem;
}
.button-group {
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.button-title {
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.1rem;
}
/* Mobile-Optimized Base Button */
.btn-mobile {
display: block;
width: 100%;
padding: 1.2rem 2rem;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Mobile-Friendly Sizes */
.btn-mobile-sm {
padding: 1rem 1.5rem;
font-size: 1rem;
}
.btn-mobile-lg {
padding: 1.5rem 2.5rem;
font-size: 1.2rem;
}
/* Primary Mobile Button */
.btn-mobile-primary {
background: #3b82f6;
color: white;
box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.4);
}
.btn-mobile-primary:active {
background: #2563eb;
transform: scale(0.98);
box-shadow: 0 2px 8px 0 rgba(59, 130, 246, 0.4);
}
/* Success Mobile Button */
.btn-mobile-success {
background: #10b981;
color: white;
box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.4);
}
.btn-mobile-success:active {
background: #059669;
transform: scale(0.98);
}
/* Danger Mobile Button */
.btn-mobile-danger {
background: #ef4444;
color: white;
box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.4);
}
.btn-mobile-danger:active {
background: #dc2626;
transform: scale(0.98);
}
/* Outline Mobile Button */
.btn-mobile-outline {
background: transparent;
color: #3b82f6;
border: 2px solid #3b82f6;
}
.btn-mobile-outline:active {
background: #3b82f6;
color: white;
transform: scale(0.98);
}
/* Ghost Mobile Button */
.btn-mobile-ghost {
background: transparent;
color: #6b7280;
border: 1px solid transparent;
}
.btn-mobile-ghost:active {
background: #f3f4f6;
border-color: #d1d5db;
}
/* Icon Buttons for Mobile */
.btn-mobile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 56px;
}
.btn-mobile-icon i {
font-size: 1.2em;
}
/* Floating Action Button for Mobile */
.btn-mobile-fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 64px;
height: 64px;
border-radius: 50%;
background: #3b82f6;
color: white;
border: none;
font-size: 1.5rem;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
-webkit-tap-highlight-color: transparent;
}
.btn-mobile-fab:active {
transform: scale(0.9);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
/* Bottom Action Bar */
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 1rem;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
display: flex;
gap: 1rem;
z-index: 999;
}
.action-bar .btn-mobile {
flex: 1;
margin: 0;
}
/* Touch Feedback */
.btn-mobile:active {
transition: transform 0.1s ease;
}
/* Loading State for Mobile */
.btn-mobile-loading {
position: relative;
color: transparent;
}
.btn-mobile-loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Responsive Adjustments */
@media (max-width: 480px) {
.container {
padding: 1.5rem;
margin: 0.5rem;
}
h1 {
font-size: 1.5rem;
}
.btn-mobile {
padding: 1.1rem 1.8rem;
font-size: 1.05rem;
}
.btn-mobile-fab {
width: 56px;
height: 56px;
bottom: 1.5rem;
right: 1.5rem;
}
}
/* High Contrast Support */
@media (prefers-contrast: high) {
.btn-mobile {
border-width: 2px;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.btn-mobile {
transition: none;
}
.btn-mobile:active {
transform: none;
}
}
/* Demo Section */
.demo-section {
background: #f8fafc;
padding: 1.5rem;
border-radius: 12px;
margin: 1.5rem 0;
border-left: 4px solid #ff9a9e;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.8rem;
}
</style>
</head>
<body>
<div class="container">
<h1>📱 Mobile Buttons</h1>
<div class="demo-section">
<h2>Primary Actions</h2>
<div class="code-example">
/* Mobile-optimized primary buttons */<br>
Larger touch targets (44px+)<br>
Clear visual feedback<br>
Accessible contrast ratios
</div>
<div class="button-group">
<div class="button-title">Primary Button</div>
<button class="btn-mobile btn-mobile-primary">
Get Started
</button>
</div>
<div class="button-group">
<div class="button-title">Success Action</div>
<button class="btn-mobile btn-mobile-success">
Confirm Order
</button>
</div>
<div class="button-group">
<div class="button-title">Danger Action</div>
<button class="btn-mobile btn-mobile-danger">
Delete Account
</button>
</div>
</div>
<div class="demo-section">
<h2>Secondary Actions</h2>
<div class="code-example">
/* Secondary button styles */<br>
Outline and ghost variants<br>
Lower visual prominence
</div>
<div class="button-group">
<div class="button-title">Outline Button</div>
<button class="btn-mobile btn-mobile-outline">
Learn More
</button>
</div>
<div class="button-group">
<div class="button-title">Ghost Button</div>
<button class="btn-mobile btn-mobile-ghost">
Cancel
</button>
</div>
</div>
<div class="demo-section">
<h2>Button Sizes & Icons</h2>
<div class="code-example">
/* Size variants and icons */<br>
Different sizes for hierarchy<br>
Icons for better recognition
</div>
<div class="button-group">
<div class="button-title">Small Button</div>
<button class="btn-mobile btn-mobile-primary btn-mobile-sm">
Small Action
</button>
</div>
<div class="button-group">
<div class="button-title">Large Button</div>
<button class="btn-mobile btn-mobile-primary btn-mobile-lg">
Important Action
</button>
</div>
<div class="button-group">
<div class="button-title">Button with Icon</div>
<button class="btn-mobile btn-mobile-primary btn-mobile-icon">
<i>⬇️</i> Download Now
</button>
</div>
<div class="button-group">
<div class="button-title">Loading State</div>
<button class="btn-mobile btn-mobile-primary btn-mobile-loading">
Processing
</button>
</div>
</div>
<div class="demo-section">
<h2>Form Actions</h2>
<div class="code-example">
/* Form submission buttons */<br>
Multiple actions in forms<br>
Clear primary/secondary distinction
</div>
<div style="display: flex; gap: 1rem; flex-direction: column;">
<button class="btn-mobile btn-mobile-primary">
Save Changes
</button>
<button class="btn-mobile btn-mobile-ghost">
Cancel
</button>
</div>
</div>
</div>
<!-- Floating Action Button -->
<button class="btn-mobile-fab">+</button>
<!-- Bottom Action Bar -->
<div class="action-bar">
<button class="btn-mobile btn-mobile-ghost">
Back
</button>
<button class="btn-mobile btn-mobile-primary">
Next
</button>
</div>
<script>
// Mobile button interactions
const buttons = document.querySelectorAll('.btn-mobile:not(.btn-mobile-loading)');
buttons.forEach(button => {
// Add touch feedback
button.addEventListener('touchstart', function() {
this.style.transform = 'scale(0.98)';
});
button.addEventListener('touchend', function() {
this.style.transform = 'scale(1)';
});
// Click handlers for demo
button.addEventListener('click', function() {
const buttonText = this.textContent.trim();
alert(`${buttonText} clicked!`);
});
});
// Floating action button
const fab = document.querySelector('.btn-mobile-fab');
fab.addEventListener('click', function() {
alert('Floating action button clicked!');
});
// Simulate loading state
const loadingBtn = document.querySelector('.btn-mobile-loading');
setTimeout(() => {
loadingBtn.classList.remove('btn-mobile-loading');
loadingBtn.textContent = 'Completed!';
loadingBtn.style.background = '#10b981';
}, 2000);
// Prevent form submission
document.querySelectorAll('button[type="submit"]').forEach(btn => {
btn.addEventListener('click', (e) => e.preventDefault());
});
</script>
</body>
</html>Button Accessibility
🎯 Focus Management
Clear focus indicators and keyboard navigation
🌈 Color Contrast
WCAG compliant color ratios
📝 ARIA Attributes
Screen reader support and semantic HTML
Accessibility Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible CSS Buttons</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2d3748;
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
}
.button-group {
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.button-title {
font-weight: 600;
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.accessibility-note {
background: #e6fffa;
border: 1px solid #81e6d9;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
font-size: 0.9rem;
}
.accessibility-note.error {
background: #fed7d7;
border-color: #feb2b2;
}
/* Accessible Base Button */
.btn-accessible {
display: inline-block;
padding: 0.75rem 1.5rem;
border: 2px solid transparent;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
min-width: 44px;
min-height: 44px;
}
/* Focus Styles */
.btn-accessible:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
.btn-accessible:focus:not(:focus-visible) {
outline: none;
}
.btn-accessible:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
/* High Contrast Support */
@media (prefers-contrast: high) {
.btn-accessible {
border-width: 3px;
}
}
/* Primary Accessible Button */
.btn-acc-primary {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.btn-acc-primary:hover {
background: #2563eb;
border-color: #2563eb;
}
.btn-acc-primary:active {
background: #1d4ed8;
transform: translateY(1px);
}
/* Success Accessible Button */
.btn-acc-success {
background: #10b981;
color: white;
border-color: #10b981;
}
/* Danger Accessible Button */
.btn-acc-danger {
background: #ef4444;
color: white;
border-color: #ef4444;
}
/* Outline with Good Contrast */
.btn-acc-outline {
background: transparent;
color: #1e40af;
border-color: #1e40af;
}
.btn-acc-outline:hover {
background: #1e40af;
color: white;
}
/* Disabled State */
.btn-acc-disabled {
background: #9ca3af;
color: #6b7280;
border-color: #9ca3af;
cursor: not-allowed;
opacity: 0.6;
}
.btn-acc-disabled:hover {
background: #9ca3af;
color: #6b7280;
border-color: #9ca3af;
transform: none;
}
/* Loading State with ARIA */
.btn-acc-loading {
position: relative;
color: transparent;
}
.btn-acc-loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Icon Button with ARIA Label */
.btn-acc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 44px;
min-height: 44px;
}
.btn-acc-icon-only {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
}
/* Skip Link */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #3b82f6;
color: white;
padding: 8px;
border-radius: 4px;
text-decoration: none;
z-index: 1000;
transition: top 0.3s;
}
.skip-link:focus {
top: 6px;
}
/* Demo Section */
.demo-section {
background: #f8fafc;
padding: 2rem;
border-radius: 15px;
margin: 2rem 0;
border-left: 4px solid #a8edea;
}
.code-example {
background: #2d3748;
color: #81e6d9;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
margin: 1rem 0;
font-size: 0.9rem;
}
/* Contrast Checker Demo */
.contrast-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.contrast-good {
background: #3b82f6;
color: white;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.contrast-bad {
background: #3b82f6;
color: #bfdbfe;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
/* Focus Management Demo */
.focus-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.btn-accessible {
transition: none;
}
.btn-acc-loading::after {
animation: none;
border: 2px solid rgba(255, 255, 255, 0.6);
}
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="container" id="main-content">
<h1>♿ Accessible Buttons</h1>
<div class="demo-section">
<h2>Keyboard Navigation & Focus</h2>
<div class="code-example">
/* Focus Management */<br>
:focus-visible for keyboard focus<br>
outline-offset for better visibility<br>
Skip links for navigation
</div>
<div class="accessibility-note">
✅ <strong>Good:</strong> Clear focus indicators help keyboard users understand which element is active.
</div>
<div class="button-group">
<div class="button-title">Try navigating with Tab key:</div>
<div class="focus-demo">
<button class="btn-accessible btn-acc-primary">First Button</button>
<button class="btn-accessible btn-acc-success">Second Button</button>
<button class="btn-accessible btn-acc-danger">Third Button</button>
<a href="#" class="btn-accessible btn-acc-outline">Link as Button</a>
</div>
</div>
</div>
<div class="demo-section">
<h2>Color Contrast & States</h2>
<div class="code-example">
/* WCAG Color Contrast */<br>
Minimum 4.5:1 for normal text<br>
3:1 for large text<br>
Proper hover and active states
</div>
<div class="contrast-demo">
<div class="contrast-good">
<strong>Good Contrast</strong><br>
WCAG AA Compliant
</div>
<div class="contrast-bad">
<strong>Poor Contrast</strong><br>
Fails WCAG
</div>
</div>
<div class="accessibility-note error">
❌ <strong>Avoid:</strong> Low contrast ratios make text difficult to read for users with visual impairments.
</div>
<div class="button-group">
<div class="button-title">Accessible Color Combinations</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<button class="btn-accessible btn-acc-primary">Primary</button>
<button class="btn-accessible btn-acc-success">Success</button>
<button class="btn-accessible btn-acc-danger">Danger</button>
<button class="btn-accessible btn-acc-outline">Outline</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Button States & ARIA</h2>
<div class="code-example">
/* ARIA Attributes & States */<br>
aria-label for icon buttons<br>
aria-disabled for disabled state<br>
aria-busy for loading states
</div>
<div class="button-group">
<div class="button-title">Button with ARIA Labels</div>
<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
<button class="btn-accessible btn-acc-icon btn-acc-primary" aria-label="Download file">
<span>⬇️</span> Download
</button>
<button class="btn-accessible btn-acc-icon-only btn-acc-success" aria-label="Settings">
⚙️
</button>
<button class="btn-accessible btn-acc-icon-only btn-acc-danger" aria-label="Delete item">
🗑️
</button>
</div>
</div>
<div class="button-group">
<div class="button-title">Button States</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<button class="btn-accessible btn-acc-primary">Normal</button>
<button class="btn-accessible btn-acc-disabled" disabled aria-disabled="true">Disabled</button>
<button class="btn-accessible btn-acc-primary btn-acc-loading" aria-busy="true">Loading</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Touch Target Sizes</h2>
<div class="code-example">
/* Mobile Accessibility */<br>
Minimum 44x44px touch targets<br>
Adequate spacing between buttons<br>
Accessible tap targets
</div>
<div class="accessibility-note">
✅ <strong>Good:</strong> Large touch targets (44px+) help users with motor impairments and mobile users.
</div>
<div class="button-group">
<div class="button-title">Proper Touch Targets</div>
<div style="display: flex; gap: 0.5rem; flex-direction: column;">
<button class="btn-accessible btn-acc-primary" style="min-height: 44px;">
Large Touch Target
</button>
<button class="btn-accessible btn-acc-outline" style="min-height: 44px;">
Another Accessible Button
</button>
</div>
</div>
</div>
<div class="demo-section">
<h2>Semantic HTML & Role</h2>
<div class="code-example">
/* Proper Semantics */<br>
Use <button> for actions<br>
Use <a> for navigation<br>
Add role="button" when needed
</div>
<div class="button-group">
<div class="button-title">Semantic Examples</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<!-- Proper button for action -->
<button class="btn-accessible btn-acc-primary">
Submit Form
</button>
<!-- Proper link for navigation -->
<a href="#next-page" class="btn-accessible btn-acc-outline">
Go to Next Page
</a>
<!-- Div with button role (use sparingly) -->
<div class="btn-accessible btn-acc-success" role="button" tabindex="0">
Custom Element
</div>
</div>
</div>
<div class="accessibility-note error">
❌ <strong>Avoid:</strong> Using <div> or <span> for buttons without proper ARIA roles and keyboard handling.
</div>
</div>
</div>
<script>
// Loading state simulation
const loadingBtn = document.querySelector('.btn-acc-loading');
setTimeout(() => {
loadingBtn.classList.remove('btn-acc-loading');
loadingBtn.textContent = 'Loaded!';
loadingBtn.setAttribute('aria-busy', 'false');
}, 3000);
// Custom element button behavior
const customBtn = document.querySelector('[role="button"]');
customBtn.addEventListener('click', function() {
alert('Custom button clicked!');
});
customBtn.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.click();
}
});
// Focus management demo
const focusableButtons = document.querySelectorAll('.btn-accessible');
focusableButtons.forEach(btn => {
btn.addEventListener('focus', function() {
console.log('Button focused:', this.textContent);
});
});
</script>
</body>
</html>Best Practices & Performance
✅ Do This
- Use semantic
<button>elements - Provide clear focus indicators
- Ensure sufficient color contrast
- Use appropriate button sizes (44px+ for mobile)
- Provide loading states for async actions
- Test with keyboard navigation
❌ Avoid This
- Don't use
<div>for buttons without ARIA - Avoid removing outline completely
- Don't use low contrast colors
- Avoid tiny touch targets on mobile
- Don't forget hover and active states
- Avoid misleading button labels
🚀 Performance Tips
CSS Transitions
Use transform and opacity for better performance
Hardware Acceleration
Use transform: translateZ(0) when needed
Reduced Motion
Respect prefers-reduced-motion preference
CSS Variables
Use custom properties for theming
Ready to Create Amazing Buttons? 🎨
Experiment with our comprehensive button examples and create beautiful, accessible buttons that enhance your user experience.