Category · Pricing Tables Difficulty Level · Advanced Published on · September 10, 2025

Magnetic Attraction Pricing Table

Interactive pricing cards with a monthly/yearly toggle and a subtle magnetic hover effect that follows the pointer.

#pricing #magnetic #hover #toggle #ui

Responsive Design

Yes

Dark Mode Support

lines

415

Browser Compatibility

Live Preview

Interact with the component without leaving the page.

520px

Usage scenarios

Landing pages that need a premium pricing section
SaaS plans with monthly/yearly billing
Product pages where hover micro-interactions increase perceived quality

Parameters you can tweak

--accent and --accent2 control the glow colors
data-monthly and data-yearly control displayed prices
max and strength in JavaScript control magnetic intensity

Common mistakes

Loading the script before the markup exists
Forgetting to include data-monthly and data-yearly attributes on each amount
Overriding transform on .magnetic-pricing__cardInner in your global CSS

Compatibility

Works in modern Chromium, Firefox, Safari (pointer events required)
Respects prefers-reduced-motion by disabling the hover movement

HTML

lines

CSS

259

lines

JavaScript

lines

                <section class="magnetic-pricing" data-magnetic-pricing>
  <header class="magnetic-pricing__header">
    <h2 class="magnetic-pricing__title">Pricing that reacts to your cursor</h2>
    <p class="magnetic-pricing__subtitle">Magnetic hover + clean tier layout for landing pages</p>
  </header>

  <div class="magnetic-pricing__billing" role="group" aria-label="Billing period">
    <span class="magnetic-pricing__label">Monthly</span>
    <label class="magnetic-pricing__switch">
      <input class="magnetic-pricing__checkbox" type="checkbox" aria-label="Toggle yearly billing" />
      <span class="magnetic-pricing__slider" aria-hidden="true"></span>
    </label>
    <span class="magnetic-pricing__label">Yearly</span>
    <span class="magnetic-pricing__badge">Save 25%</span>
  </div>

  <div class="magnetic-pricing__grid">
    <article class="magnetic-pricing__card" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Starter</h3>
          <p class="magnetic-pricing__desc">For personal projects</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="19" data-yearly="14">19</span>
          <span class="magnetic-pricing__period">/mo</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>3 projects</li>
          <li>10GB storage</li>
          <li>Email support</li>
          <li class="is-muted">API access</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Choose Starter</button>
      </div>
    </article>

    <article class="magnetic-pricing__card is-popular" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__pill">Most popular</div>
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Team</h3>
          <p class="magnetic-pricing__desc">For growing teams</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="49" data-yearly="36">49</span>
          <span class="magnetic-pricing__period">/mo</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>10 projects</li>
          <li>100GB storage</li>
          <li>Priority support</li>
          <li>API access</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Choose Team</button>
      </div>
    </article>

    <article class="magnetic-pricing__card" data-plan>
      <div class="magnetic-pricing__cardInner">
        <div class="magnetic-pricing__top">
          <h3 class="magnetic-pricing__plan">Business</h3>
          <p class="magnetic-pricing__desc">For larger orgs</p>
        </div>

        <div class="magnetic-pricing__price">
          <span class="magnetic-pricing__currency">\$</span>
          <span class="magnetic-pricing__amount" data-monthly="119" data-yearly="89">119</span>
          <span class="magnetic-pricing__period">/mo</span>
        </div>

        <ul class="magnetic-pricing__features">
          <li>Unlimited projects</li>
          <li>1TB storage</li>
          <li>SLA support</li>
          <li>Advanced security</li>
        </ul>

        <button class="magnetic-pricing__cta" type="button">Choose Business</button>
      </div>
    </article>
  </div>
</section>

              

                .magnetic-pricing {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.06);
  --panelBorder: rgba(255, 255, 255, 0.12);
  --text: #e7eefc;
  --muted: rgba(231, 238, 252, 0.7);
  --accent: #7c3aed;
  --accent2: #22d3ee;
  --shadow: rgba(0, 0, 0, 0.45);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(1000px 500px at 80% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
    var(--bg);
  border-radius: 24px;
  padding: 28px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 30px 80px var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.magnetic-pricing__header {
  text-align: center;
  margin-bottom: 20px;
}

.magnetic-pricing__title {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.magnetic-pricing__subtitle {
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.magnetic-pricing__billing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 26px;
}

.magnetic-pricing__label {
  font-size: 0.95rem;
  color: var(--muted);
}

.magnetic-pricing__badge {
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #08101f;
  background: linear-gradient(135deg, var(--accent2), #a7f3d0);
  padding: 6px 10px;
  border-radius: 999px;
}

.magnetic-pricing__switch {
  position: relative;
  width: 58px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.magnetic-pricing__checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.magnetic-pricing__slider {
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.magnetic-pricing__slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.35);
  transition: transform 200ms ease;
}

.magnetic-pricing__checkbox:focus-visible + .magnetic-pricing__slider {
  outline: 3px solid rgba(34, 211, 238, 0.35);
  outline-offset: 3px;
}

.magnetic-pricing__checkbox:checked + .magnetic-pricing__slider::before {
  transform: translateY(-50%) translateX(28px);
}

.magnetic-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.magnetic-pricing__card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--panelBorder);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
}

.magnetic-pricing__cardInner {
  position: relative;
  background: rgba(9, 14, 26, 0.42);
  border-radius: 18px;
  margin: 10px;
  padding: 18px 18px 16px;
  transition: transform 140ms ease;
  will-change: transform;
}

.magnetic-pricing__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.35), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.26), transparent 45%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.magnetic-pricing__card.is-active::before {
  opacity: 1;
}

.magnetic-pricing__card.is-popular {
  border-color: rgba(34, 211, 238, 0.35);
}

.magnetic-pricing__pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(34, 211, 238, 0.15);
  border: 1px solid rgba(34, 211, 238, 0.35);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(231, 238, 252, 0.92);
  margin-bottom: 10px;
}

.magnetic-pricing__top {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.magnetic-pricing__plan {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.magnetic-pricing__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.magnetic-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 14px;
}

.magnetic-pricing__currency {
  color: rgba(231, 238, 252, 0.85);
  font-weight: 700;
}

.magnetic-pricing__amount {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, rgba(231, 238, 252, 0.98), rgba(34, 211, 238, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.magnetic-pricing__period {
  color: var(--muted);
  font-weight: 600;
}

.magnetic-pricing__features {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  color: rgba(231, 238, 252, 0.88);
  font-size: 0.95rem;
  min-height: 96px;
}

.magnetic-pricing__features .is-muted {
  color: rgba(231, 238, 252, 0.45);
}

.magnetic-pricing__cta {
  margin-top: 14px;
  width: 100%;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(231, 238, 252, 0.95);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.magnetic-pricing__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(34, 211, 238, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .magnetic-pricing__grid {
    grid-template-columns: 1fr;
  }
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const containers = document.querySelectorAll('[data-magnetic-pricing]');

  containers.forEach((container) => {
    const toggle = container.querySelector('.magnetic-pricing__checkbox');
    const amounts = container.querySelectorAll('.magnetic-pricing__amount');

    const syncBilling = () => {
      const yearly = Boolean(toggle && toggle.checked);
      amounts.forEach((el) => {
        const monthly = el.getAttribute('data-monthly');
        const yearlyValue = el.getAttribute('data-yearly');
        el.textContent = yearly ? (yearlyValue || el.textContent) : (monthly || el.textContent);
      });
      container.querySelectorAll('.magnetic-pricing__period').forEach((el) => {
        el.textContent = yearly ? '/yr' : '/mo';
      });
    };

    if (toggle) toggle.addEventListener('change', syncBilling);
    syncBilling();

    if (prefersReducedMotion) return;

    const cards = container.querySelectorAll('.magnetic-pricing__card');
    cards.forEach((card) => {
      const inner = card.querySelector('.magnetic-pricing__cardInner');
      if (!inner) return;

      let raf = 0;
      let targetX = 0;
      let targetY = 0;

      const apply = () => {
        raf = 0;
        inner.style.transform = `translate(\${targetX}px, \${targetY}px)`;
      };

      const onMove = (event) => {
        const rect = card.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const dx = x - rect.width / 2;
        const dy = y - rect.height / 2;
        const max = 18;
        const strength = 0.12;
        targetX = Math.max(-max, Math.min(max, dx * strength));
        targetY = Math.max(-max, Math.min(max, dy * strength));
        card.classList.add('is-active');
        if (!raf) raf = requestAnimationFrame(apply);
      };

      const onLeave = () => {
        card.classList.remove('is-active');
        targetX = 0;
        targetY = 0;
        if (!raf) raf = requestAnimationFrame(apply);
      };

      card.addEventListener('pointermove', onMove);
      card.addEventListener('pointerleave', onLeave);
    });
  });
});

              

Markdown to HTML Converter

Privacy Policy Generator

Magnetic Attraction Pricing Table

Live Preview

Usage scenarios

Parameters you can tweak

Common mistakes

Compatibility

Related Code Snippets

Magnetic Attraction FAQ

3D Floating Pricing Cards

Cyberpunk Pricing Matrix

Explore template packs