Brilliant Buttons
From simple and elegant to absolutely bonkers - explore button styles that make users actually want to click. No framework needed, just pure CSS magic!
Basic Button Styles
Clean, accessible button designs for every occasion
Hover Effects
Buttons that respond beautifully to user interaction
Animated Buttons
Buttons with personality that demand attention
Creative Buttons
When ordinary just won't do - buttons that break the mould
Button Recipes
The CSS behind the magic
Basic Button Structure
/* Base button styles */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
font-weight: 600;
text-align: center;
text-decoration: none;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Primary button */
.btn-primary {
background: var(--colour-primary);
color: white;
}
.btn-primary:hover {
background: var(--colour-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}Gradient Hover Effect
/* Gradient shift on hover */
.btn-gradient {
background: linear-gradient(
135deg,
var(--colour-primary) 0%,
var(--colour-secondary) 100%
);
background-size: 200% 200%;
background-position: 0% 0%;
}
.btn-gradient:hover {
background-position: 100% 100%;
}Border Animation
/* Animated border draw */
.btn-border-draw {
background: transparent;
color: var(--colour-primary);
position: relative;
}
.btn-border-draw::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border: 2px solid var(--colour-primary);
border-right: none;
border-left: none;
transition: width 0.3s;
}
.btn-border-draw:hover::before {
width: 100%;
}Loading Animation
/* Spinner button */
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-loading-spinner .btn-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.btn-loading-spinner.loading .btn-text {
display: none;
}
.btn-loading-spinner.loading .btn-spinner {
display: inline-block;
}Button Best Practices
Accessibility First
Always ensure buttons have proper contrast ratios and focus states for keyboard navigation.
Touch Targets
Make buttons at least 44x44 pixels for comfortable mobile tapping.
Performance
Use transform and opacity for animations - they're GPU accelerated!
British Wisdom
Like a good cup of tea, the best buttons are simple, reliable, and always there when you need them.
Try It Yourself
Click any button to see it in action!
All buttons on this page are interactive. Click them, hover over them, and inspect the code to learn how they work!
Open in Playground