input#slow(type='checkbox')
label(for='slow') slow motion

button chocolate coated gingerbread
  span.wrap(aria-hidden='true')
    span.particle(style=`--a: -45deg; --x: 53%; --y: 15%; --d: 4em; --f: .7; --t: .15`)
    span.particle(style=`--a: 150deg; --x: 40%; --y: 70%; --d: 7.5em; --f: .8; --t: .08`)
    span.particle(style=`--a: 10deg; --x: 90%; --y: 65%; --d: 7em; --f: .6; --t: .25`)
    span.particle(style=`--a: -120deg; --x: 15%; --y: 10%; --d: 4em`)
    span.particle(style=`--a: -175deg; --x: 10%; --y: 25%; --d: 5.25em; --f: .6; --t: .32`)
    span.particle(style=`--a: -18deg; --x: 80%; --y: 25%; --d: 4.75em; --f: .5; --t: .4`)
    span.particle(style=`--a: -160deg; --x: 30%; --y: 5%; --d: 9em; --f: .9; --t: .5`)
    span.particle(style=`--a: 175deg; --x: 9%; --y: 30%; --d: 6em; --f: .95; --t: .6`)
    span.particle(style=`--a: -10deg; --x: 89%; --y: 25%; --d: 4.5em; --f: .55; --t: .67`)
    span.particle(style=`--a: -140deg; --x: 40%; --y: 10%; --d: 5em; --f: .85; --t: .75`)
    span.particle(style=`--a: 90deg; --x: 45%; --y: 65%; --d: 4em; --f: .5; --t: .83`)
    span.particle(style=`--a: 30deg; --x: 70%; --y: 80%; --d: 6.5em; --f: .75; --t: .92`)

$t: 1s;

@property --k {
  syntax: '<number>';
  initial-value: -1;
  inherits: true
}

html, body { display: grid }

html { height: 100% }

body { place-content: center; overflow-x: hidden }

button {
  --m: 1;
  grid-area: 2/ 1/ span 1/ span 2;
  position: relative;
  margin: 1em;
  border: solid 2em transparent;
  padding: 1.5em 3.25em;
  border-radius: 5em;
  box-shadow: inset 0 0 1px #23429e;
  background: 
    radial-gradient(#111a39, 67.5%, #3476da) padding-box, 
    radial-gradient(#a0c2ed, 35%, #a0c2ed00 70%) 50% 0/ 80% 50% repeat-y;
  color: #f2fdfe;
  font: 700 1.5em/ 1 montserrat, sans-serif;
  
  #slow:checked ~ & { --m: 5 }
  
  &:active { translate: 0 2px }
}

@keyframes k { 0%, 33.3% { --k: 1 } }

.particle {
  --f: 1;
  --pos-k: max(0, var(--k));
  --neg-k: max(0, -1*var(--k));
  --low-c: min(1, 4*(1 - var(--pos-k)));
  --abs-d: max(var(--neg-k) - .5, .5 - var(--neg-k));
  --mov-f: var(--pos-k);
  display: grid;
  position: absolute;
  left: var(--x); top: var(--y);
  rotate: var(--a);
  animation: k calc(var(--m)*#{$t}) linear calc(var(--m)*var(--t, 0)*#{$t}) infinite;
  
  @supports (scale: sqrt(4)) { --mov-f: sqrt(var(--pos-k)) }
  
  &::before, &::after {
    grid-area: 1/ 1;
    width: .75em;
    aspect-ratio: 1
  }
  
  &::before {
    --sa: calc(min(1, 1 - 2*min(.5, var(--mov-f)))*45deg);
    border-radius: calc(1.25*min(.8, var(--mov-f))*50%) 50% 50%;
    transform-origin: 0 0;
    translate: calc(var(--mov-f)*var(--d));
    rotate: -45deg;
    scale: var(--f);
    transform: skew(var(--sa), var(--sa));
    opacity: var(--low-c);
    filter: Saturate(var(--low-c));
    background: radial-gradient(at 85% 85%, #bad9fa, #3e66a4 75%);
    content: ''
  }
  
  &::after {
    translate: -50% -50%;
    scale: calc(var(--f)*(1 - 2*var(--abs-d)));
    text-align: center;
    filter: blur(.5px);
    content: '✦'
  }
}

[type='checkbox'] {
  justify-self: end;
  margin: 5px;
  width: 1em;
  aspect-ratio: 1;
  
  &, & + label {
    align-self: center;
    font: 1.25em orbitron, monospace;
    cursor: pointer
  }
}

// no JS whatsoever ;) cross-browser ;)