→ Cleo Claren
→ Clean Pricing cards with toggle switch f...

Clean Pricing cards with toggle switch for monthly and yearly plans

This Example is contributed by Cleo Claren, on 26-Feb-2025. It is responsive. similar terms for this example are Theme Toggle,Toggle,Toggle Button,Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Toggle switch Pricing Card

Author Cleo Claren

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-header">
    <h2>Choose Your Perfect Plan</h2>
    <p>Select the option that works best for your business needs</p>
    <div class="pricing-toggle">
      <span>Monthly</span>
      <label class="switch">
        <input type="checkbox" id="billing-toggle">
        <span class="slider round"></span>
      </label>
      <span>Annual <span class="discount">Save 20%</span></span>
    </div>
  </div>
  
  <div class="pricing-plans">
    <div class="pricing-plan">
      <div class="plan-header">
        <h3>Starter</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="19" data-annual="15">19</span>
          <span class="period">/month</span>
        </div>
        <p>Perfect for individuals and small projects</p>
      </div>
      <div class="plan-features">
        <ul>
          <li><span class="check">✓</span> 5 Projects</li>
          <li><span class="check">✓</span> 20GB Storage</li>
          <li><span class="check">✓</span> Basic Analytics</li>
          <li><span class="check">✓</span> 24/7 Support</li>
          <li class="disabled"><span class="cross">×</span> Advanced Features</li>
          <li class="disabled"><span class="cross">×</span> Custom Domain</li>
        </ul>
      </div>
      <div class="plan-cta">
        <a href="#" class="btn">Get Started</a>
      </div>
    </div>
    
    <div class="pricing-plan popular">
      <div class="popular-badge">Most Popular</div>
      <div class="plan-header">
        <h3>Professional</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="49" data-annual="39">49</span>
          <span class="period">/month</span>
        </div>
        <p>Ideal for growing businesses and teams</p>
      </div>
      <div class="plan-features">
        <ul>
          <li><span class="check">✓</span> 15 Projects</li>
          <li><span class="check">✓</span> 50GB Storage</li>
          <li><span class="check">✓</span> Advanced Analytics</li>
          <li><span class="check">✓</span> 24/7 Priority Support</li>
          <li><span class="check">✓</span> Advanced Features</li>
          <li class="disabled"><span class="cross">×</span> Custom Domain</li>
        </ul>
      </div>
      <div class="plan-cta">
        <a href="#" class="btn">Get Started</a>
      </div>
    </div>
    
    <div class="pricing-plan">
      <div class="plan-header">
        <h3>Enterprise</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="99" data-annual="79">99</span>
          <span class="period">/month</span>
        </div>
        <p>For large organizations with advanced needs</p>
      </div>
      <div class="plan-features">
        <ul>
          <li><span class="check">✓</span> Unlimited Projects</li>
          <li><span class="check">✓</span> 200GB Storage</li>
          <li><span class="check">✓</span> Premium Analytics</li>
          <li><span class="check">✓</span> 24/7 VIP Support</li>
          <li><span class="check">✓</span> Advanced Features</li>
          <li><span class="check">✓</span> Custom Domain</li>
        </ul>
      </div>
      <div class="plan-cta">
        <a href="#" class="btn">Get Started</a>
      </div>
    </div>
  </div>
  
  <div class="pricing-footer">
    <p>All plans include a 14-day free trial. No credit card required.</p>
    <p>Need something custom? <a href="#">Contact our sales team</a></p>
  </div>
</div>

Related Examples