Gradient Button Collection

snippet.publishedOn January 22, 2024 Beginner

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

Live Preview

Code Implementation

HTML

<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>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.button-collection {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: 100vh;
  padding: 3rem 2rem;
  color: white;
}