← All elements

Shine Gradient Buttons

by @admin · 1 views

<div class="showcase">
  <div class="header">
    <h1 class="main-title">Polished Button Collection</h1>
    <p class="description">Beautiful, shiny UI components with light sweep animations</p>
  </div>

  <div class="button-collection">
    <div class="button-wrapper">
      <span class="button-label">Ocean Waves</span>
      <button class="shine-button button-ocean">Get Started</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Emerald Forest</span>
      <button class="shine-button button-emerald">Explore More</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Sunset Glow</span>
      <button class="shine-button button-sunset">Learn More</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Deep Ocean</span>
      <button class="shine-button button-deep">Dive In</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Golden Hour</span>
      <button class="shine-button button-gold">Discover</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Chrome Polish</span>
      <button class="shine-button button-chrome">Premium</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Royal Purple</span>
      <button class="shine-button button-purple">Upgrade</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Fresh Mint</span>
      <button class="shine-button button-mint">Refresh</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Electric Lime</span>
      <button class="shine-button button-electric">Energise</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Soft Lavender</span>
      <button class="shine-button button-lavender">Relax</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Fire Ember</span>
      <button class="shine-button button-fire">Ignite</button>
    </div>

    <div class="button-wrapper">
      <span class="button-label">Forest Depths</span>
      <button class="shine-button button-forest">Explore</button>
    </div>
  </div>
</div>

More in Buttons

View all →