RGB Glow Button
An exact replica of the animated RGB button from Nakhl Market Plus. Built with pure CSS, no JavaScript required, and fully customizable with CSS custom properties.
Default Buttons
Buy Subscription
RGB Link
Confirm Purchase
✨ Exact animation replica: 400% gradient over 20 seconds with 5px blur effect
Size Variations
Small
Medium
Large
Use predefined size classes or customize padding with CSS variables.
Animation Speed Options
Super Fast (3s)
Fast (8s)
Default (20s)
Slow (30s)
Custom (12s)
Use speed modifier classes: rgb-button--super-fast, rgb-button--fast, rgb-button--slow, or rgb-button--custom with a CSS variable.
Custom Gradients
Ocean Gradient
Faster Purple Wave
RGB Primary + Thick Border
Override CSS custom properties inline or in your stylesheet to create unique variations.
Usage Example
<!-- Include the CSS -->
<link rel="stylesheet" href="styles/rgb-button.css">
<!-- Basic usage -->
<button class="rgb-button">Your Button Text</button>
<!-- With custom properties -->
<button
class="rgb-button"
style="--rgb-speed: 10s; --rgb-blur: 8px;"
>
Custom Button
</button>
Accessibility Features
This component includes several accessibility features:
Keyboard Navigation: Press Tab to see focus statesReduced Motion: Animation automatically disables if user prefers reduced motionScreen Readers: Works with standard button/link semanticsColor Contrast: Maintains readable text contrast ratios
Try Tab Navigation
Technical Details
Animation Duration: 20 seconds
Gradient Size: 400%
Blur Effect: 5px
Border Thickness: 2px
Ready to Use
Copy the CSS file to your project and start using the RGB button component. Check the README.md for detailed documentation and customization options.
📁
View on GitHub