MiMo-V2.6-Flash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Like — no JavaScript</title>
<style>
  :root{
    --red:#ff2d55;
    --red-deep:#e11d48;
    --orange:#ff7a18;
    --gold:#ffd166;
    --ink:#101014;
    --paper:#fff6f2;
    --shadow: 0 24px 48px -20px rgba(0,0,0,.35);
  }

  *{ box-sizing:border-box; }

  html,body{ height:100%; }

  body{
    margin:0;
    font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 15% -10%, #ffe3ea 0%, transparent 55%),
      radial-gradient(900px 700px at 110% 15%, #ffe9cf 0%, transparent 50%),
      var(--paper);
    display:grid;
    place-items:center;
    overflow-x:hidden;
    padding:24px;
  }

  .stage{
    position:relative;
    display:grid;
    gap:28px;
    justify-items:center;
    text-align:center;
    max-width:640px;
    width:100%;
  }

  .kicker{
    font-size:13px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#9a5b63;
  }

  h1{
    margin:6px 0 0;
    font-size:clamp(30px, 6vw, 54px);
    line-height:1;
    letter-spacing:-.03em;
  }

  h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--red),var(--orange) 60%,var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .sub{
    margin:14px auto 0;
    max-width:44ch;
    color:#6d5a5d;
    font-size:15px;
    line-height:1.5;
  }

  /* ---------------- the like control ---------------- */

  .like{
    position:relative;
    margin-top:10px;
    width:96px;
    height:96px;
    display:grid;
    place-items:center;
    transform:rotate(-3deg);
  }

  /* hidden checkbox = the state, pure CSS */
  .like input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
    z-index:5;
  }

  .like:has(input:focus-visible) .halo{
    outline:3px dashed var(--red);
    outline-offset:6px;
    border-radius:50%;
  }

  .halo{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#fff;
    border:4px solid var(--ink);
    box-shadow: var(--shadow), 0 0 0 0 rgba(255,45,85,.4);
    transition:transform .35s cubic-bezier(.2,.8,.3,1.4), box-shadow .35s ease;
    pointer-events:none;
  }

  .like:hover .halo{
    transform:scale(1.08) rotate(6deg);
    box-shadow: var(--shadow), 0 12px 0 -2px rgba(255,45,85,.25);
  }

  .heart{
    position:relative;
    width:44px;
    height:40px;
    z-index:2;
    filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));
    transform:scale(1);
    transition:transform .25s cubic-bezier(.2,.8,.3,1.5);
    pointer-events:none;
  }

  .heart::before,
  .heart::after{
    content:"";
    position:absolute;
    top:0;
    width:24px;
    height:38px;
    border:4px solid var(--ink);
    background:#fff;
    border-radius:24px 24px 6px 6px;
  }
  .heart::before{ left:19px; transform:rotate(-45deg); transform-origin:0 100%; }
  .heart::after { left:-1px; transform:rotate(45deg);  transform-origin:100% 100%; }

  /* label under button */
  .label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#9a5b63;
    transition:color .3s ease, opacity .3s ease;
  }

  /* ------------- ON state: the explosion ------------- */

  .like:has(input:checked){
    animation:pop 700ms cubic-bezier(.16,1.6,.3,1) both;
  }

  @keyframes pop{
    0%   { transform:rotate(-3deg) scale(1); }
    18%  { transform:rotate(14deg) scale(.78); }
    42%  { transform:rotate(-11deg) scale(1.34); }
    66%  { transform:rotate(7deg) scale(.94); }
    84%  { transform:rotate(-3deg) scale(1.06); }
    100% { transform:rotate(-3deg) scale(1); }
  }

  .like:has(input:checked) .halo{
    background:linear-gradient(145deg,var(--red) 0%,var(--orange) 70%,var(--gold) 130%);
    border-color:var(--ink);
    animation:ring 700ms cubic-bezier(.16,1.6,.3,1) both;
  }

  @keyframes ring{
    0%   { transform:scale(1); box-shadow:0 0 0 0 rgba(255,45,85,0); }
    30%  { transform:scale(.82); box-shadow:0 0 0 4px rgba(255,45,85,.35); }
    55%  { transform:scale(1.22); box-shadow:0 0 0 26px rgba(255,45,85,.22); }
    100% { transform:scale(1); box-shadow:0 0 0 70px rgba(255,45,85,0); }
  }

  .like:has(input:checked) .heart{
    fill:var(--red);
    background:linear-gradient(180deg,#fff 0%,#fff 100%);
    animation:heartBurst 700ms cubic-bezier(.16,1.8,.3,1) both;
  }

  .like:has(input:checked) .heart::before,
  .like:has(input:checked) .heart::after{
    background:var(--red);
    border-color:var(--ink);
  }

  @keyframes heartBurst{
    0%   { transform:scale(1) rotate(0); }
    35%  { transform:scale(1.75) rotate(-16deg); }
    55%  { transform:scale(.7) rotate(12deg); }
    75%  { transform:scale(1.35) rotate(-6deg); }
    100% { transform:scale(1.15) rotate(0); }
  }

  /* burst particles — pure CSS */
  .burst i{
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border-radius:3px;
    background:var(--red);
    border:2px solid var(--ink);
    opacity:0;
    transform:translate(0,0) scale(.2) rotate(0deg);
    pointer-events:none;
  }
  .burst i:nth-child(2n){ background:var(--gold); border-radius:50%; }
  .burst i:nth-child(3n){ background:var(--orange); }

  .like:has(input:checked) .burst i{
    animation:shard 780ms cubic-bezier(.12,.9,.3,1) both;
  }

  @keyframes shard{
    0%   { opacity:0; transform:translate(0,0) scale(.2) rotate(0); }
    12%  { opacity:1; transform:translate(calc(var(--x)*.3), calc(var(--y)*.3)) scale(1) rotate(20deg); }
    100% { opacity:0; transform:translate(var(--x), var(--y)) scale(.35) rotate(var(--r)); }
  }

  .burst i:nth-child(1){ --x:-96px; --y:-72px; --r:220deg; }
  .burst i:nth-child(2){ --x:96px;  --y:-64px; --r:-180deg; }
  .burst i:nth-child(3){ --x:-118px;--y:6px;   --r:300deg; }
  .burst i:nth-child(4){ --x:118px; --y:10px;  --r:-260deg; }
  .burst i:nth-child(5){ --x:-70px; --y:84px;  --r:140deg; }
  .burst i:nth-child(6){ --x:74px;  --y:88px;  --r:-140deg; }
  .burst i:nth-child(7){ --x:-6px;  --y:-114px;--r:90deg; }
  .burst i:nth-child(8){ --x:16px;  --y:116px; --r:-90deg; }
  .burst i:nth-child(9){ --x:-134px;--y:-40px; --r:400deg; }
  .burst i:nth-child(10){--x:136px; --y:-44px; --r:-400deg; }
  .burst i:nth-child(11){--x:-42px; --y:-140px;--r:170deg; }
  .burst i:nth-child(12){--x:52px;  --y:138px; --r:-170deg; }

  /* floating +1 numbers */
  .pluses{
    position:absolute;
    inset:-40px;
    pointer-events:none;
    z-index:4;
  }
  .pluses b{
    position:absolute;
    font-size:26px;
    font-weight:900;
    color:var(--red-deep);
    opacity:0;
    text-shadow:0 3px 0 rgba(0,0,0,.15);
  }
  .pluses b:nth-child(1){ left:4%;  top:56%; font-size:34px; }
  .pluses b:nth-child(2){ left:74%; top:2%;  font-size:22px; }
  .pluses b:nth-child(3){ left:70%; top:70%; font-size:28px; }
  .pluses b:nth-child(4){ left:16%; top:0%;  font-size:20px; }

  .like:has(input:checked) .pluses b{
    animation:floatUp 900ms ease-out both;
  }
  .like:has(input:checked) .pluses b:nth-child(2){ animation-delay:.08s; }
  .like:has(input:checked) .pluses b:nth-child(3){ animation-delay:.16s; }
  .like:has(input:checked) .pluses b:nth-child(4){ animation-delay:.24s; }

  @keyframes floatUp{
    0%   { opacity:0; transform:translateY(10px) scale(.4) rotate(-8deg); }
    30%  { opacity:1; transform:translateY(-14px) scale(1.15) rotate(4deg); }
    100% { opacity:0; transform:translateY(-70px) scale(.9) rotate(-6deg); }
  }

  /* confetti-ish background burst on like */
  .bgpop{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,45,85,.35), transparent 45%);
    opacity:0;
  }
  body:has(.like input:checked) .bgpop{
    animation:flash 700ms ease-out both;
  }
  @keyframes flash{
    0%{ opacity:0; }
    25%{ opacity:1; }
    100%{ opacity:0; }
  }

  /* count, purely decorative, driven by CSS */
  .counter{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    margin-top:-6px;
  }
  .counter .num{
    position:relative;
    display:inline-block;
    width:2ch;
    text-align:right;
    font-size:40px;
    font-weight:900;
    letter-spacing:-.04em;
  }
  .counter .num span{
    position:absolute;
    right:0;
    top:0;
    transition:opacity .35s ease, transform .45s cubic-bezier(.2,1.5,.4,1);
  }
  .counter .num .a{ opacity:1; transform:translateY(0); }
  .counter .num .b{ opacity:0; transform:translateY(-18px) scale(1.2); }
  body:has(.like input:checked) .counter .num .a{
    opacity:0; transform:translateY(18px) scale(.7);
  }
  body:has(.like input:checked) .counter .num .b{
    opacity:1; transform:translateY(0) scale(1);
  }
  .counter .word{
    font-size:14px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#8b7a7d;
  }

  .like:has(input:checked) ~ .counter .num{ color:var(--red); }

  .hint{
    font-size:12.5px;
    color:#8b7a7d;
    letter-spacing:.04em;
  }

  .note{
    margin-top:4px;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#b09a9d;
    font-weight:700;
  }

  .shapes span{
    position:absolute;
    display:block;
    border:3px solid var(--ink);
    opacity:.5;
    z-index:-1;
  }
  .shapes .s1{ width:60px; height:60px; border-radius:14px; left:-40px; top:20%; transform:rotate(20deg); background:#ffd166; }
  .shapes .s2{ width:44px; height:44px; border-radius:50%; right:-24px; top:12%; background:#ff7a18; }
  .shapes .s3{ width:80px; height:22px; border-radius:999px; right:-50px; bottom:14%; background:#ff2d55; transform:rotate(-18deg); }
  .shapes .s4{ width:34px; height:34px; left:-30px; bottom:20%; transform:rotate(45deg); background:#ffe0e6; }

  @media (max-width:420px){
    .stage{ gap:20px; }
    .sub{ font-size:14px; }
    .shapes{ display:none; }
  }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }
</style>
</head>
<body>

<div class="bgpop"></div>

<main class="stage">
  <div class="shapes" aria-hidden="true">
    <span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span>
  </div>

  <div>
    <p class="kicker">Pure CSS · zero JavaScript</p>
    <h1>Give it some <em>love</em></h1>
    <p class="sub">A single checkbox, a whole lot of <code>:has()</code>, and an unreasonable amount of confetti. Go on — click it.</p>
  </div>

  <label class="like">
    <input type="checkbox" aria-label="Like this">
    <span class="halo"></span>

    <span class="burst" aria-hidden="true">
      <i></i><i></i><i></i><i></i><i></i><i></i>
      <i></i><i></i><i></i><i></i><i></i><i></i>
    </span>

    <span class="pluses" aria-hidden="true">
      <b>+1</b><b>+1</b><b>+1</b><b>+1</b>
    </span>

    <span class="heart"></span>
  </label>

  <p class="label">Click the heart</p>

  <div class="counter">
    <span class="num">
      <span class="a">128</span>
      <span class="b">129</span>
    </span>
    <span class="word">likes</span>
  </div>

  <p class="hint">Hover to wobble · click to detonate · click again to un-like</p>
  <p class="note">no JS was harmed in the making of this button</p>
</main>

</body>
</html>