Microinteractions Lab · Visual Playground

01 — Toggles

Heart Like Button

A classic social-media style "like" button. Click to toggle — the heart fills red and pops with a scale animation. Built with a hidden checkbox + :checked selector, so no JavaScript is needed.

checkbox hack + transform keyframes TOGGLE

<span class="heart-wrap">
  <input type="checkbox" id="heart1"/>
  <label for="heart1">
    <svg class="heart" viewBox="0 0 24 24">
      <path d="M12 21s-7-4.5-9.5-9C1 9 2 5 5.5 5
               c2 0 3.5 1 4.5 2.5 1-1.5 2.5-2.5 4.5-2.5
               3.5 0 4.5 4 3 7-2.5 4.5-9.5 9-9.5 9z"/>
    </svg>
  </label>
</span>

.heart-wrap input { opacity: 0; position: absolute; }
.heart-wrap .heart {
  width: 32px; height: 32px;
  fill: transparent;
  stroke: rgba(255,255,255,.5);
  stroke-width: 2;
  transition: transform .2s, fill .3s, stroke .3s;
}
/* When the hidden checkbox is checked, style the SVG */
.heart-wrap input:checked ~ label .heart {
  fill: #ef4444;
  stroke: #ef4444;
  animation: heartPop .45s ease;
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

02 — Toggles

Toggle Switch

iOS-style on/off switch. The thumb slides to the right and the track changes color when checked. The cubic-bezier easing gives it a satisfying bounce.

checkbox + translateX with spring easing TOGGLE

<label class="switch">
  <input type="checkbox"/>
  <span class="track"></span>
  <span class="thumb"></span>
</label>

.switch {
  position: relative;
  display: inline-block;
  width: 56px; height: 30px;
}
.switch input { opacity: 0; position: absolute; }

/* Track — background pill */
.switch .track {
  position: absolute; inset: 0;
  background: #334155;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s;
}
/* Thumb — circle that slides */
.switch .thumb {
  position: absolute; left: 3px; top: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
/* When checked: track turns green, thumb slides right */
.switch input:checked ~ .track  { background: #10b981; }
.switch input:checked ~ .thumb  { transform: translateX(26px); }

03 — Toggles

Animated Checkbox

A custom checkbox where the tick is an SVG path that draws itself in. Uses stroke-dasharray + stroke-dashoffset — a trick for animating any SVG shape.

SVG stroke-dashoffset animation TOGGLE

I agree to the terms Subscribe to updates

<label class="check-box">
  <input type="checkbox"/>
  <span class="box">
    <svg class="tick" viewBox="0 0 14 14">
      <polyline points="1.5 7 6 11 13 3"/>
    </svg>
  </span>
  <span>I agree to the terms</span>
</label>

.check-box input { opacity: 0; position: absolute; }

.check-box .box {
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.check-box .tick {
  width: 14px; height: 14px;
  stroke: #fff; stroke-width: 3; fill: none;
  stroke-dasharray: 25;   /* length of the tick path */
  stroke-dashoffset: 25;  /* hidden: offset equals length */
  transition: stroke-dashoffset .35s ease;
}
.check-box input:checked ~ .box {
  background: #6366f1;
  border-color: #6366f1;
}
.check-box input:checked ~ .box .tick {
  stroke-dashoffset: 0;   /* draws in */
}

04 — Toggles

Hamburger → X

Three bars that morph into a close (X) icon when clicked. The middle bar fades out; the top and bottom bars rotate to form the X.

3 bars + rotate + translate TOGGLE

<label class="burger">
  <input type="checkbox"/>
  <span class="line top"></span>
  <span class="line mid"></span>
  <span class="line bot"></span>
</label>

.burger {
  position: relative; width: 40px; height: 40px;
  cursor: pointer; display: inline-block;
}
.burger input { opacity: 0; position: absolute; }

.burger .line {
  position: absolute; left: 8px;
  width: 24px; height: 2px;
  background: #e2e8f0; border-radius: 2px;
  transition: transform .3s, opacity .2s, top .3s;
}
.burger .line.top { top: 13px; }
.burger .line.mid { top: 19px; }
.burger .line.bot { top: 25px; }

/* When checked: top + bot meet in the middle and rotate */
.burger input:checked ~ .line.top { top: 19px; transform: rotate(45deg); }
.burger input:checked ~ .line.mid { opacity: 0; }
.burger input:checked ~ .line.bot { top: 19px; transform: rotate(-45deg); }

05 — Feedback

Click Ripple

Material-style ripple that expands from the center when the button is pressed. Uses an absolutely-positioned ::after circle that scales up via a keyframe animation.

::after + @keyframes on :active FEEDBACK

<button class="ripple-btn">Click me</button>

.ripple-btn {
  position: relative;
  overflow: hidden;           /* clip the ripple to button shape */
  background: #6366f1;
  color: #fff;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}
/* Small invisible circle in the center */
.ripple-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
}
/* When clicked: run the ripple animation */
.ripple-btn:active::after { animation: ripple .6s ease-out; }
@keyframes ripple {
  0%   { transform: translate(-50%,-50%) scale(0);  opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(40); opacity: 0;  }
}

06 — Feedback

Success Checkmark

A celebratory state for form submissions or finished tasks — the circle pops into view and the check is drawn in. Useful at the end of a sign-up flow or after a save.

scale pop + SVG stroke draw FEEDBACK

<div class="success">
  <div class="circle">
    <svg viewBox="0 0 24 24">
      <polyline points="4 12 10 18 20 6"/>
    </svg>
  </div>
</div>

.success .circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #10b981;
  display: flex; align-items: center; justify-content: center;
  animation: successPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.success svg {
  width: 30px; height: 30px;
  stroke: #fff; stroke-width: 4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw .5s .3s ease forwards;
}
@keyframes successPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes checkDraw  { to { stroke-dashoffset: 0; } }

07 — Feedback

Progress Bar

An animated striped progress bar showing ongoing work. The stripes are built with a linear-gradient at a 45° angle and continuously shift position.

diagonal gradient + background-position shift FEEDBACK

<div class="progress">
  <div class="fill"></div>
</div>

.progress {
  width: 100%; max-width: 360px;
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.progress .fill {
  height: 100%;
  width: 70%;                 /* change to show different progress */
  background-color: #6366f1;
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.2) 25%, transparent 25%,
    transparent 50%,
    rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%,
    transparent 75%, transparent);
  background-size: 20px 20px;
  border-radius: 999px;
  animation: progressStripes 1.5s linear infinite;
}
@keyframes progressStripes {
  to { background-position: 40px 0; }
}

08 — Feedback

Skeleton Loader

Placeholder blocks with a shimmer effect shown while real content loads. The shimmer is an animated linear-gradient sliding across each block.

shimmer keyframes on background-position FEEDBACK

<div class="skeleton">
  <div class="line block"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line short"></div>
</div>

.skeleton { display: flex; flex-direction: column; gap: 10px; width: 340px; }
.skeleton .line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;          /* canvas wider than visible */
  animation: shimmer 1.5s linear infinite;
}
.skeleton .line.short { width: 60%; }
.skeleton .line.block { height: 80px; border-radius: 10px; }

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

09 — Controls

Floating Label Input

The label starts centered inside the input. When focused or filled, it floats up and shrinks — giving you a compact label that never overlaps the value. Uses :placeholder-shown to detect whether the field is empty.

:focus + :placeholder-shown + transform CONTROL

Email address

Your name

<div class="float-group">
  <!-- IMPORTANT: placeholder must be a single space -->
  <input type="email" id="email1" placeholder=" "/>
  <label for="email1">Email address</label>
</div>

.float-group { position: relative; width: 280px; }

.float-group input {
  width: 100%;
  padding: 18px 14px 8px;        /* extra top padding for label */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}
.float-group label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.5);
  pointer-events: none;          /* so clicks go to the input */
  background: transparent;
  padding: 0 4px;
  transition: all .2s ease;
}
/* Float up when: focused OR when input has a value
   (:placeholder-shown is true ONLY when the field is empty) */
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
  top: 0;
  transform: translateY(-50%) scale(.85);
  color: #6366f1;
  background: #0a0a12;           /* matches page bg to punch out border */
}

10 — Controls

Radio Card Group

Pricing plans, shipping options, avatars — anywhere you'd pick one of a few. The selected card gets a colored border and glow via :has(input:checked).

:has(input:checked) for parent styling CONTROL

Starter Free forever Pro $12 / month Team $29 / month

<div class="radio-cards">
  <label>
    <input type="radio" name="plan"/>
    Starter <small>Free forever</small>
  </label>
  <label>
    <input type="radio" name="plan" checked/>
    Pro <small>$12 / month</small>
  </label>
  <label>
    <input type="radio" name="plan"/>
    Team <small>$29 / month</small>
  </label>
</div>

.radio-cards { display: flex; gap: 12px; flex-wrap: wrap; }

.radio-cards label {
  cursor: pointer;
  padding: 14px 20px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.08);
  transition: all .2s;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 130px;
  color: #e2e8f0;
}
.radio-cards label small { color: rgba(255,255,255,.5); font-size: 11px; }

/* Hide the real radios */
.radio-cards input { opacity: 0; position: absolute; }

/* :has() lets us style the LABEL based on a child's state
   — picks the card whose input is checked */
.radio-cards label:has(input:checked) {
  background: rgba(99,102,241,.12);
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

11 — Navigation

Arrow Link

A text link where the arrow nudges to the right on hover while the gap opens up. Subtle but compelling — common in editorial "Read more" links.

inline-flex gap + translateX on arrow NAV

Read the article → View all posts →

<a href="#" class="arrow-link">
  Read the article
  <span class="arrow">→</span>
</a>

.arrow-link {
  color: #6366f1;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;                /* small gap at rest */
  transition: gap .25s, color .2s;
}
.arrow-link .arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.arrow-link:hover {
  gap: 10px;               /* space opens up */
  color: #818cf8;
}
.arrow-link:hover .arrow {
  transform: translateX(4px);   /* arrow nudges right */
}

12 — Navigation

Tooltip on Hover

A pop-up bubble with extra information, shown on hover. The tooltip text lives in a data-tip attribute so no extra HTML is needed — just content: attr(data-tip).

::before with content: attr() + opacity NAV

auto-save password team slug

<span class="tip" data-tip="Saved just now">auto-save</span>

.tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed rgba(255,255,255,.3);
}
/* Tooltip bubble — pulls text from data-tip */
.tip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1e1e2e;
  color: #e2e8f0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
/* Little triangle pointing down */
.tip::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e1e2e;
  opacity: 0;
  transition: opacity .2s;
}
.tip:hover::before,
.tip:hover::after { opacity: 1; }
.tip:hover::before { transform: translateX(-50%) translateY(0); }