→ Anonymous
→ Button Collection

Button Collection

This Example is contributed by Anonymous, on 20-Mar-2025. It is responsive. similar terms for this example are Buttons,CTA Button,CTA,banner

Button Call to Action Gradient Hover Effect

Author Anonymous

Fork Fullscreen

<div class="buttons-container">
  <div class="button-row">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <button class="btn success">Success</button>
    <button class="btn danger">Danger</button>
  </div>
  
  <div class="button-row">
    <button class="btn outline primary">Primary</button>
    <button class="btn outline secondary">Secondary</button>
    <button class="btn outline success">Success</button>
    <button class="btn outline danger">Danger</button>
  </div>
  
  <div class="button-row">
    <button class="btn rounded primary">Primary</button>
    <button class="btn rounded secondary">Secondary</button>
    <button class="btn rounded success">Success</button>
    <button class="btn rounded danger">Danger</button>
  </div>
  
  <div class="button-row">
    <button class="btn icon primary">
      <span class="btn-icon">↓</span>
      Download
    </button>
    <button class="btn icon secondary">
      <span class="btn-icon">+</span>
      Add New
    </button>
    <button class="btn icon success">
      <span class="btn-icon">✓</span>
      Confirm
    </button>
    <button class="btn icon danger">
      <span class="btn-icon">×</span>
      Delete
    </button>
  </div>
  
  <div class="button-row">
    <button class="btn gradient blue">Gradient Blue</button>
    <button class="btn gradient purple">Gradient Purple</button>
    <button class="btn gradient orange">Gradient Orange</button>
    <button class="btn gradient green">Gradient Green</button>
  </div>
</div>

Related Examples