Solid colors and simple outlines are great, but sometimes your web application needs something that truly catches the user's eye. Gradients are making a massive comeback in modern web design, especially when paired with dark themes and smooth animations.
While updating the Button components category on Codebar Library, I wanted to build a set of highly interactive, vibrant buttons that go beyond standard styling.
Today, I’m sharing the Premium Vibrant Gradient Buttons—a free, responsive component combining Bootstrap 5, Custom CSS, and Vanilla JavaScript.
🎨 The Design: Vibrant & Dynamic
These buttons are built for modern, dark-themed applications. They feature beautifully blended background gradients (Aurora, Sunset, Ocean, Lime) housed inside a sleek glassmorphism container.
✨ Key Technical Features
To get that premium feel, I combined a few different techniques:
Animated Hover States: Custom CSS3 handles the smoothly shifting background gradients and the glowing box-shadows that appear when you interact with the button.
Precision JS Ripple Effect: I included a lightweight Vanilla JavaScript snippet. Unlike CSS-only ripples, this one calculates the exact coordinates of your click and expands the ripple outward from that specific point.
Responsive by Default: Built on top of Bootstrap 5.3, these buttons adapt automatically—expanding to full width on mobile devices and sitting inline on larger screens.
Glassmorphism Backdrop: The container utilizes backdrop-filter to create a subtle blur effect over your application's background.
Modern Typography: Uses 'Syne' and 'JetBrains Mono' Google Fonts for a clean, futuristic aesthetic.
🎥 See the Gradients and Ripple in Action
The smooth color shifts and the click animations are best seen live. Check out the demo:
🚀 Get the Source Code
You can grab the complete HTML, CSS, and the tiny JavaScript snippet needed for this component right now, completely free.
👉 Get the Vibrant Gradient Buttons on Codebar Library (Check it out under the Button components category!)
Let me know which gradient style is your favorite in the comments!
Top comments (0)