→ Amelia Chen
→ Pricing Table with Animated Toggle

Pricing Table with Animated Toggle

Compare our flexible pricing plans and choose the perfect one for your needs. Interactive toggle allows instant switching between monthly and annual billing.

This Example is contributed by Amelia Chen, on 12-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 Subscription Plans Comparison Chart

Author Amelia Chen

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-switcher">
    <p class="fieldset">
      <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked>
      <label for="monthly-1">Monthly</label>
      <input type="radio" name="duration-1" value="yearly" id="yearly-1">
      <label for="yearly-1">Annually</label>
      <span class="switch"></span>
    </p>
  </div>

<ul class="pricing-list bounce-invert">
    <li>
      <ul class="pricing-wrapper">
        <li data-type="monthly" class="is-visible">
          <header class="pricing-header">
            <h2>Basic</h2>
            <div class="price">
              <span class="currency">$</span>
              <span class="value">10</span>
              <span class="duration">mo</span>
            </div>
          </header>
          <div class="pricing-body">
            <ul class="pricing-features">
              <li><em>5</em> Email Accounts</li>
              <li><em>1</em> Website</li>
              <li><em>10GB</em> Storage</li>
              <li><em>24/7</em> Support</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
        <li data-type="yearly" class="is-hidden">
          <header class="pricing-header">
            <h2>Basic</h2>
            <div class="price">
              <span class="currency">$</span>
              <span class="value">100</span>
              <span class="duration">yr</span>
            </div>
          </header>
          <div class="pricing-body">
            <ul class="pricing-features">
               <li><em>5</em> Email Accounts</li>
              <li><em>1</em> Website</li>
              <li><em>10GB</em> Storage</li>
              <li><em>24/7</em> Support</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
      </ul>
    </li>
    <li class="exclusive">
      <ul class="pricing-wrapper">
        <li data-type="monthly" class="is-visible">
          <header class="pricing-header">
            <h2>Premium</h2>
            <div class="price">
              <span class="currency">$</span>
              <span class="value">25</span>
              <span class="duration">mo</span>
            </div>
          </header>
          <div class="pricing-body">
              <ul class="pricing-features">
              <li><em>25</em> Email Accounts</li>
              <li><em>5</em> Websites</li>
              <li><em>50GB</em> Storage</li>
              <li><em>24/7</em> Support</li>
              <li><em>Free</em> Domain</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
        <li data-type="yearly" class="is-hidden">
          <header class="pricing-header">
            <h2>Premium</h2>
             <div class="price">
              <span class="currency">$</span>
              <span class="value">250</span>
              <span class="duration">yr</span>
            </div>
          </header>
          <div class="pricing-body">
            <ul class="pricing-features">
              <li><em>25</em> Email Accounts</li>
              <li><em>5</em> Websites</li>
              <li><em>50GB</em> Storage</li>
              <li><em>24/7</em> Support</li>
                <li><em>Free</em> Domain</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
      </ul>
    </li>
    <li>
      <ul class="pricing-wrapper">
        <li data-type="monthly" class="is-visible">
          <header class="pricing-header">
            <h2>Ultimate</h2>
            <div class="price">
              <span class="currency">$</span>
              <span class="value">50</span>
              <span class="duration">mo</span>
            </div>
          </header>
        <div class="pricing-body">
           <ul class="pricing-features">
              <li><em>Unlimited</em> Email Accounts</li>
              <li><em>Unlimited</em> Websites</li>
              <li><em>Unlimited</em> Storage</li>
              <li><em>24/7</em> Priority Support</li>
                <li><em>Free</em> Domain</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
        <li data-type="yearly" class="is-hidden">
          <header class="pricing-header">
            <h2>Ultimate</h2>
            <div class="price">
              <span class="currency">$</span>
              <span class="value">500</span>
              <span class="duration">yr</span>
            </div>
          </header>
          <div class="pricing-body">
             <ul class="pricing-features">
              <li><em>Unlimited</em> Email Accounts</li>
              <li><em>Unlimited</em> Websites</li>
              <li><em>Unlimited</em> Storage</li>
              <li><em>24/7</em> Priority Support</li>
              <li><em>Free</em> Domain</li>
            </ul>
          </div>
          <footer class="pricing-footer">
            <a class="select" href="#">Select Plan</a>
          </footer>
        </li>
      </ul>
    </li>
  </ul>
</div>

Related Examples