25 / 47

All 47 in 47 Tailwind CSS Toggles & Switches

Pure TailwindMIT licensed

Tailwind Squash-and-Stretch Pebble Toggle

A river pebble instead of a circle: the asymmetric blob squashes as it launches, stretches mid-flight and wobbles back into shape on landing. Two --animate-* tokens — one for checking, one for unchecking — because a transition cannot sequence anticipate → stretch → settle.

Live DemoSep 23, 2026

Plain CSSTailwind v4

Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="ttg-25 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg25-bg font-ttg25-sans" aria-label="Bouncy pebble organic toggle">
  <label for="ttg-25-sw" class="flex items-center gap-8 px-7 py-5 rounded-[22px] cursor-pointer bg-ttg25-card shadow-[0_12px_30px_-20px_oklch(0.45_0.04_95/0.55)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold text-ttg25-ink">Rain sounds</span>
      <span class="text-[12.5px] text-ttg25-mute">Loops quietly while you write</span>
    </span>
    <input type="checkbox" id="ttg-25-sw" role="switch" class="appearance-none shrink-0 w-21 h-11 rounded-[26px] bg-ttg25-off relative cursor-pointer transition-colors duration-500 checked:bg-ttg25-on before:content-[''] before:absolute before:top-[5px] before:left-[5px] before:w-8.5 before:h-8.5 before:bg-ttg25-pebble before:shadow-[0_3px_7px_oklch(0.45_0.04_95/0.4)] before:rounded-[40%_60%_55%_45%/55%_45%_60%_40%] before:animate-ttg25-back checked:before:rounded-[60%_40%_45%_55%/45%_55%_40%_60%] checked:before:animate-ttg25-go focus-visible:outline-3 focus-visible:outline-ttg25-on focus-visible:outline-offset-4 motion-reduce:before:animate-none motion-reduce:checked:before:translate-x-[38px]">
  </label>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg25-mute">Squash &middot; stretch &middot; wobble</p>
</section>

<section class="ttg-25 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg25-bg font-ttg25-sans" aria-label="Bouncy pebble organic toggle">
  <label for="ttg-25-sw" class="flex items-center gap-8 px-7 py-5 rounded-[22px] cursor-pointer bg-ttg25-card shadow-[0_12px_30px_-20px_oklch(0.45_0.04_95/0.55)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold text-ttg25-ink">Rain sounds</span>
      <span class="text-[12.5px] text-ttg25-mute">Loops quietly while you write</span>
    </span>
    <input type="checkbox" id="ttg-25-sw" role="switch" class="appearance-none shrink-0 w-21 h-11 rounded-[26px] bg-ttg25-off relative cursor-pointer transition-colors duration-500 checked:bg-ttg25-on before:content-[''] before:absolute before:top-[5px] before:left-[5px] before:w-8.5 before:h-8.5 before:bg-ttg25-pebble before:shadow-[0_3px_7px_oklch(0.45_0.04_95/0.4)] before:rounded-[40%_60%_55%_45%/55%_45%_60%_40%] before:animate-ttg25-back checked:before:rounded-[60%_40%_45%_55%/45%_55%_40%_60%] checked:before:animate-ttg25-go focus-visible:outline-3 focus-visible:outline-ttg25-on focus-visible:outline-offset-4 motion-reduce:before:animate-none motion-reduce:checked:before:translate-x-[38px]">
  </label>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg25-mute">Squash &middot; stretch &middot; wobble</p>
</section>

@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}

@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}

@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}

3Fonts used by this demooptional — skip if you have your own type stack

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

Two --animate-* tokens for one control is the correct shape when a state change is choreographed rather than interpolated — and it is the clearest case in the collection for when NOT to reach for a transition.
The eight-value organic radius survives the port as a single arbitrary value with underscores and a slash, which is exactly the kind of multi-value syntax people assume Tailwind cannot express.
The reduced-motion path needed two utilities, not one: animate-none to stop the choreography and checked:before:translate-x-[38px] to still land the thumb. Removing an animation that also performs the movement is the most common reduced-motion bug in the wild.
UI change from the CSS original: the on-green darkened to oklch(0.58 0.11 155) so the pebble holds a 4.6:1 edge against the track it sits on, the caption ink lifted to oklch(0.58), and the row gained a supporting line — a switch this playful still has to say what it does.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Squash-and-Stretch Pebble Toggle
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-squash-and-stretch-pebble-toggle/

A river pebble instead of a circle: the asymmetric blob squashes as it launches, stretches mid-flight and wobbles back into shape on landing. Two --animate-* tokens &mdash; one for checking, one for unchecking &mdash; because a transition cannot sequence anticipate &rarr; stretch &rarr; settle.
## HTML
```html
<section class="ttg-25 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg25-bg font-ttg25-sans" aria-label="Bouncy pebble organic toggle">
  <label for="ttg-25-sw" class="flex items-center gap-8 px-7 py-5 rounded-[22px] cursor-pointer bg-ttg25-card shadow-[0_12px_30px_-20px_oklch(0.45_0.04_95/0.55)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold text-ttg25-ink">Rain sounds</span>
      <span class="text-[12.5px] text-ttg25-mute">Loops quietly while you write</span>
    </span>
    <input type="checkbox" id="ttg-25-sw" role="switch" class="appearance-none shrink-0 w-21 h-11 rounded-[26px] bg-ttg25-off relative cursor-pointer transition-colors duration-500 checked:bg-ttg25-on before:content-[''] before:absolute before:top-[5px] before:left-[5px] before:w-8.5 before:h-8.5 before:bg-ttg25-pebble before:shadow-[0_3px_7px_oklch(0.45_0.04_95/0.4)] before:rounded-[40%_60%_55%_45%/55%_45%_60%_40%] before:animate-ttg25-back checked:before:rounded-[60%_40%_45%_55%/45%_55%_40%_60%] checked:before:animate-ttg25-go focus-visible:outline-3 focus-visible:outline-ttg25-on focus-visible:outline-offset-4 motion-reduce:before:animate-none motion-reduce:checked:before:translate-x-[38px]">
  </label>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg25-mute">Squash &middot; stretch &middot; wobble</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Squash-and-Stretch Pebble Toggle
Source: https://codefronts.com/components/tailwind-css-toggles-switches/tailwind-squash-and-stretch-pebble-toggle/

A river pebble instead of a circle: the asymmetric blob squashes as it launches, stretches mid-flight and wobbles back into shape on landing. Two --animate-* tokens &mdash; one for checking, one for unchecking &mdash; because a transition cannot sequence anticipate &rarr; stretch &rarr; settle.
## HTML
```html
<section class="ttg-25 w-full min-h-svh flex flex-col items-center justify-center gap-7 px-5 py-14 bg-ttg25-bg font-ttg25-sans" aria-label="Bouncy pebble organic toggle">
  <label for="ttg-25-sw" class="flex items-center gap-8 px-7 py-5 rounded-[22px] cursor-pointer bg-ttg25-card shadow-[0_12px_30px_-20px_oklch(0.45_0.04_95/0.55)]">
    <span class="flex flex-col gap-0.5">
      <span class="text-[15.5px] font-semibold text-ttg25-ink">Rain sounds</span>
      <span class="text-[12.5px] text-ttg25-mute">Loops quietly while you write</span>
    </span>
    <input type="checkbox" id="ttg-25-sw" role="switch" class="appearance-none shrink-0 w-21 h-11 rounded-[26px] bg-ttg25-off relative cursor-pointer transition-colors duration-500 checked:bg-ttg25-on before:content-[''] before:absolute before:top-[5px] before:left-[5px] before:w-8.5 before:h-8.5 before:bg-ttg25-pebble before:shadow-[0_3px_7px_oklch(0.45_0.04_95/0.4)] before:rounded-[40%_60%_55%_45%/55%_45%_60%_40%] before:animate-ttg25-back checked:before:rounded-[60%_40%_45%_55%/45%_55%_40%_60%] checked:before:animate-ttg25-go focus-visible:outline-3 focus-visible:outline-ttg25-on focus-visible:outline-offset-4 motion-reduce:before:animate-none motion-reduce:checked:before:translate-x-[38px]">
  </label>
  <p class="text-[12px] tracking-[0.12em] uppercase text-ttg25-mute">Squash &middot; stretch &middot; wobble</p>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg25-bg: #e8e2d3;
  --color-ttg25-bg: oklch(0.91 0.02 95);
  --color-ttg25-card: #f4f0e4;
  --color-ttg25-card: oklch(0.95 0.015 95);
  --color-ttg25-off: #d3ccb8;
  --color-ttg25-off: oklch(0.85 0.025 95);
  --color-ttg25-on: #4e8f63;
  --color-ttg25-on: oklch(0.58 0.11 155);
  --color-ttg25-pebble: #f9f6ee;
  --color-ttg25-pebble: oklch(0.97 0.008 95);
  --color-ttg25-ink: #44412f;
  --color-ttg25-ink: oklch(0.37 0.02 100);
  --color-ttg25-mute: #857d64;
  --color-ttg25-mute: oklch(0.58 0.025 95);
  --font-ttg25-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --animate-ttg25-go: ttg25-go 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
  --animate-ttg25-back: ttg25-back 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes ttg25-go {
  0% {
    transform: translateX(0) scale(1, 1);
  }

  15% {
    transform: translateX(-3px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(20px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(38px) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(38px) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(38px) scale(1, 1);
  }
}

@keyframes ttg25-back {
  0% {
    transform: translateX(38px) scale(1, 1);
  }

  15% {
    transform: translateX(41px) scale(0.85, 1.12);
  }

  45% {
    transform: translateX(18px) scale(1.28, 0.76);
  }

  70% {
    transform: translateX(0) scale(0.9, 1.08);
  }

  85% {
    transform: translateX(0) scale(1.06, 0.95);
  }

  100% {
    transform: translateX(0) scale(1, 1);
  }
}

.ttg-25 {
  width: 100%;
  min-height: 100svh;
}

.ttg-25 input[type="checkbox"] {
  -webkit-appearance: none;
}
```

How this works

Squash and stretch needs keyframes, not transitions. The choreography is four beats: anticipate backwards (0.85/1.12), launch and stretch mid-travel (1.28/0.76), land with overshoot, then two diminishing counter-squashes. A transition interpolates between two states; this is five.

Two animations, mirrored. The uncheck path is a separate token running the same beats in reverse, applied at rest so the pebble returns with the same personality it left with. Both use forwards so the thumb stays where the animation ended.

The radius morphs too. Slightly different eight-value radii in each state mean the pebble looks hand-formed rather than stamped — a detail that costs one utility and does most of the organic work.

Make it yours

More cartoon: push the mid-flight stretch to 1.4 / 0.7 in the keyframes.
Reshape the pebble by editing the eight radius percentages; keep the two states different.
Palette: sage and cream here — clay/sand or moss/stone work identically.
Landing dust: an after: ring that scales and fades on the final keyframe beat.

Gotchas — read before shipping

The uncheck animation also plays once on first paint. Harmless, but start the demo checked if it bothers you — or gate it behind a class the script adds after load.
Keep all squash on transform: scale(). Animating border-radius through the flight jitters on low-end GPUs.
Under motion-reduce: the animation must be replaced by a static transform, not merely removed — animate-none alone would park the thumb at the left in both states.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

Keyframe animations on transform are universal; the eight-value border-radius is CSS3 and equally portable.

Techniques used in this demo

Utilitiesfirst-class utility or variant

prefers-reduced-motiontw ↗