**Quick answer:** An animated pricing toggle lets visitors switch Monthly ↔ Yearly with a sliding pill, morphing prices, a “Save %” badge, and yearly billed totals — all in pure HTML, CSS, and a small JavaScript snippet. Copy the code below or open the live demo first. Live demo: [Animated Pricing Toggle (Monthly/Yearly)](/demos/animated-pricing-toggle/index.html) ## What you will build This free Get Code pack includes: - A pill-style Monthly / Yearly switch with a sliding amber thumb - Price numbers that animate when billing changes - A teal **Save 20%** badge that appears on yearly - “Billed $X / year” helper text under each plan - Three responsive pricing cards (Starter, Growth, Studio) - Accessible `role="switch"` toggle with keyboard focus styles No React. No jQuery. Drop it into WordPress, Elementor HTML, Shopify, or any static page. ## Live preview screenshots ### Monthly billing ![Animated pricing toggle set to Monthly with three plan cards](/blog/get-code/animated-pricing-toggle/01-monthly.png) Monthly is the default. Growth stays featured with the amber border and primary CTA. ### Yearly billing + Save badge ![Animated pricing toggle set to Yearly with Save 20 percent badge and updated prices](/blog/get-code/animated-pricing-toggle/02-yearly.png) Flip the switch: prices drop, the save badge fades in, and yearly billed totals appear under each price. ### Mobile layout ![Mobile stacked pricing cards with yearly toggle active](/blog/get-code/animated-pricing-toggle/03-mobile-yearly.png) On small screens cards stack to one column and the Popular plan rises to the top for better conversion focus. ## How to use this code 1. Create `index.html` (or paste into an HTML widget). 2. Add the CSS in a `

SaaS UI

Posts tagged SaaS UI

Animated Pricing Toggle (Monthly/Yearly) — Free HTML, CSS & JS