Modern Gradient Button
A sleek, modern button with gradient background, hover effects, and smooth transitions perfect for call-to-action elements.
Responsive Design
Yes
Dark Mode Support
Yes
lines
53
Browser Compatibility
Chrome · Firefox · Safari · Edge
Live Preview
Interact with the component without leaving the page.
Modern Gradient Button
This modern button component features a beautiful gradient background with smooth hover animations and a sliding shine effect. Perfect for call-to-action buttons, form submissions, or any interactive element that needs to stand out.
Features
- Gradient Background: Eye-catching gradient from blue to purple
- Hover Effects: Subtle lift animation with enhanced shadow
- Shine Animation: Sliding shine effect on hover
- Icon Animation: Arrow icon slides on hover
- Responsive: Works perfectly on all screen sizes
- Accessible: Proper focus states and semantic markup
Usage
Simply add the HTML structure and CSS styles to create this modern button. The component is self-contained and doesn’t require any JavaScript.
Customization
You can easily customize:
- Colors: Change the gradient colors in the
backgroundproperty - Size: Adjust
paddingandfont-sizefor different button sizes - Border Radius: Modify
border-radiusfor different corner styles - Animation Speed: Change
transitionduration for faster/slower effects
Browser Support
This component uses modern CSS features like gradients and transforms, supported in all modern browsers. The fallback gracefully degrades in older browsers.
HTML
4
lines
CSS
49
lines
<button class="modern-btn">
<span class="btn-text">Get Started</span>
<span class="btn-icon">→</span>
</button>
Browser Compatibility
Chrome
≥ 26
Firefox
≥ 16
Safari
≥ 7
Edge
≥ 12