Back
Learn how to design an eye-catching gradient button with seamless color transitions and interactive feedback.
<div class="button-container">
<button class="gradient-button">Get Started</button>
</div>
The button text can be customized to match your specific call-to-action.
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
Next, we define the gradient button with CSS variables for easy customization:
.gradient-button {
--button-bg-from: #8B5CF6;
--button-bg-to: #EC4899;
--button-padding-x: 28px;
--button-padding-y: 14px;
--button-font-size: 16px;
--button-radius: 8px;
--button-shadow-size: 12px;
--button-transition-time: 0.3s;
position: relative;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: var(--button-font-size);
color: white;
background: linear-gradient(135deg, var(--button-bg-from), var(--button-bg-to));
background-size: 200% 100%;
background-position: 0 0;
border: none;
border-radius: var(--button-radius);
padding: var(--button-padding-y) var(--button-padding-x);
cursor: pointer;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(139, 92, 246, 0.5);
transition: all var(--button-transition-time) ease;
overflow: hidden;
outline: none;
z-index: 1;
}
The key properties here:
- We define a linear gradient from purple to pink for a modern look
- The background-size is set larger than the button to prepare for possible background position animation
- We add a subtle drop shadow that matches the gradient start color
- The z-index and position:relative prepare the button to work with the pseudo-element
To create a smooth gradient transition on hover, we use a pseudo-element:
.gradient-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--button-bg-to), var(--button-bg-from));
opacity: 0;
z-index: -1;
transition: opacity var(--button-transition-time) ease;
border-radius: var(--button-radius);
}
This pseudo-element contains the reversed gradient, which will fade in on hover for a smooth color transition.
Next, we add hover and active states for interactive feedback:
.gradient-button:hover {
transform: translateY(-3px);
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(139, 92, 246, 0.6);
}
.gradient-button:hover::before {
opacity: 1;
}
.gradient-button:active {
transform: translateY(-1px);
box-shadow: 0 var(--button-shadow-size) 15px -8px rgba(139, 92, 246, 0.4);
}
The hover effect does several things:
- Lifts the button slightly to create a "floating" effect
- Enhances the shadow to increase the sense of elevation
- Reveals the reversed gradient through the pseudo-element for a smooth color shift
The active state reduces these effects slightly to create a subtle "press" feedback.
We also add a focus state for accessibility:
/* Focus state for accessibility */
.gradient-button:focus-visible {
outline: 3px solid rgba(139, 92, 246, 0.5);
outline-offset: 2px;
}
Finally, we provide alternative color schemes for versatility:
/* Alternative color schemes */
.gradient-button.blue-green {
--button-bg-from: #3B82F6;
--button-bg-to: #10B981;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(59, 130, 246, 0.5);
}
.gradient-button.blue-green:hover {
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(59, 130, 246, 0.6);
}
.gradient-button.orange-red {
--button-bg-from: #F59E0B;
--button-bg-to: #EF4444;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(245, 158, 11, 0.5);
}
.gradient-button.orange-red:hover {
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(245, 158, 11, 0.6);
}
These classes override the gradient colors and shadows, allowing you to use different color schemes for different purposes or sections of your site.
This gradient button offers several advantages:
- Visual appeal: The gradient colors create a modern, eye-catching look that draws attention.
- Interactive feedback: The hover and active states provide clear, satisfying feedback.
- Smooth transitions: The pseudo-element approach allows for smooth gradient transitions without jarring changes.
- Dimensional feel: The elevation effect with shadows adds depth to the interface.
- Versatility: The color variants make it adaptable to different brand colors and contexts.
This button style is perfect for primary calls-to-action on landing pages, sign-up forms, and checkout processes where you want to draw attention to the most important action.
<div class="button-container">
<button class="gradient-button">Get Started</button>
</div>
<style>
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.gradient-button {
--button-bg-from: #8B5CF6;
--button-bg-to: #EC4899;
--button-padding-x: 28px;
--button-padding-y: 14px;
--button-font-size: 16px;
--button-radius: 8px;
--button-shadow-size: 12px;
--button-transition-time: 0.3s;
position: relative;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: var(--button-font-size);
color: white;
background: linear-gradient(135deg, var(--button-bg-from), var(--button-bg-to));
background-size: 200% 100%;
background-position: 0 0;
border: none;
border-radius: var(--button-radius);
padding: var(--button-padding-y) var(--button-padding-x);
cursor: pointer;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(139, 92, 246, 0.5);
transition: all var(--button-transition-time) ease;
overflow: hidden;
outline: none;
z-index: 1;
}
.gradient-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--button-bg-to), var(--button-bg-from));
opacity: 0;
z-index: -1;
transition: opacity var(--button-transition-time) ease;
border-radius: var(--button-radius);
}
.gradient-button:hover {
transform: translateY(-3px);
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(139, 92, 246, 0.6);
}
.gradient-button:hover::before {
opacity: 1;
}
.gradient-button:active {
transform: translateY(-1px);
box-shadow: 0 var(--button-shadow-size) 15px -8px rgba(139, 92, 246, 0.4);
}
/* Focus state for accessibility */
.gradient-button:focus-visible {
outline: 3px solid rgba(139, 92, 246, 0.5);
outline-offset: 2px;
}
/* Alternative color schemes */
.gradient-button.blue-green {
--button-bg-from: #3B82F6;
--button-bg-to: #10B981;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(59, 130, 246, 0.5);
}
.gradient-button.blue-green:hover {
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(59, 130, 246, 0.6);
}
.gradient-button.orange-red {
--button-bg-from: #F59E0B;
--button-bg-to: #EF4444;
box-shadow: 0 var(--button-shadow-size) 20px -8px rgba(245, 158, 11, 0.5);
}
.gradient-button.orange-red:hover {
box-shadow: 0 var(--button-shadow-size) 25px -5px rgba(245, 158, 11, 0.6);
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!