Category · Interactive Difficulty Level · Beginner Published on · January 22, 2024
Gradient Button Collection
A comprehensive collection of modern gradient buttons with hover effects, animations, and various styles. Perfect for CTAs, forms, and interactive elements with stunning visual appeal.
#gradient #buttons #hover #animation #cta
Responsive Design
Yes
Dark Mode Support
Yes
lines
55
Browser Compatibility
No
Live Preview
Interact with the component without leaving the page.
Gradient Button Collection
A comprehensive collection of modern gradient buttons featuring stunning visual effects, smooth animations, and interactive elements.
HTML
42
lines
CSS
13
lines
<div class="button-collection">
<div class="collection-header">
<h2 class="collection-title">Gradient Button Collection</h2>
<p class="collection-subtitle">Modern buttons with stunning gradient effects</p>
</div>
<div class="button-grid">
<!-- Primary Gradient Buttons -->
<div class="button-section">
<h3 class="section-title">Primary Gradients</h3>
<div class="button-row">
<button class="gradient-btn primary-ocean" data-text="Ocean Blue">
<span class="btn-text">Ocean Blue</span>
<span class="btn-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
<button class="gradient-btn primary-sunset" data-text="Sunset Orange">
<span class="btn-text">Sunset Orange</span>
<span class="btn-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
<button class="gradient-btn primary-forest" data-text="Forest Green">
<span class="btn-text">Forest Green</span>
<span class="btn-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M22 11.08V12A10 10 0 1 1 5.93 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 4L12 14.01L9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>