Style a button with a beautiful gradient background and smooth hover states.
Gradient buttons are eye-catching CTAs. Use linear-gradient and background-size for animated hover effects.
Set a gradient as the background using linear-gradient().
Use a larger background-size and shift the position on hover for a smooth animation.
Always maintain sufficient color contrast (4.5:1 for normal text, 3:1 for large text) per WCAG.
.btn {
display: inline-flex;
align-items: center;
padding: 0.75rem 2rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
color: #fff;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background-size: 200% 200%;
transition: background-position 0.4s ease, transform 0.15s;
}
.btn:hover {
background-position: right center;
transform: translateY(-1px);
}