<div class="emoji">
  <input type="checkbox" id="r1">
  <label for="r1" class="react" style="--border-color: #f44336; --dot-color1: red;--dot-color2: orange;">
    <i data-icon="💞"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r2">
  <label for="r2" class="react" style="--border-color: #e91e63; --dot-color1: #e21515;--dot-color2: #15e25c;">
    <i data-icon="💖"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r3">
  <label for="r3" class="react" style="--border-color: #9c27b0; --dot-color1: #9c27b0;--dot-color2: #a5af4c;">
    <i data-icon="💘"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r4">
  <label for="r4" class="react" style="--border-color: #2196f3; --dot-color1: #00ff9e;--dot-color2: #ff5722;">
    <i data-icon="💔"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r5">
  <label for="r5" class="react" style="--border-color: #4caf50; --dot-color1: #a0347b;--dot-color2: #f9c100;">
    <i data-icon="🔥"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r6">
  <label for="r6" class="react" style="--border-color: #ffc107; --dot-color1: #03a9f4;--dot-color2: #a21143;">
    <i data-icon="🧨"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r7">
  <label for="r7" class="react" style="--border-color: #ff5722; --dot-color1: #1f35b1;--dot-color2: #844b39;">
    <i data-icon="💯"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r8">
  <label for="r8" class="react" style="--border-color: #75c718; --dot-color1: #960817;--dot-color2: #0b98cc;">
    <i data-icon="💋"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r9">
  <label for="r9" class="react" style="--border-color: #c7188a; --dot-color1: #ff5722;--dot-color2: #c7188a;">
    <i data-icon="🍔"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r10">
  <label for="r10" class="react" style="--border-color: #181ec7; --dot-color1: #ffc107;--dot-color2: #cddc39;">
    <i data-icon="🐻"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r11">
  <label for="r11" class="react" style="--border-color: #cddc39; --dot-color1: ;--dot-color2: ;">
    <i data-icon="💥"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r12">
  <label for="r12" class="react" style="--border-color: #463131; --dot-color1: #07ff68;--dot-color2: #ff0;">
    <i data-icon="🪔"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r13">
  <label for="r13" class="react" style="--border-color: #c71dc3; --dot-color1: #09feaf;--dot-color2: #909090;">
    <i data-icon="💡"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r14">
  <label for="r14" class="react" style="--border-color: #c309af; --dot-color1: blue;--dot-color2: lime;">
    <i data-icon="🥰"></i>
  </label>
</div>
<div class="emoji">
  <input type="checkbox" id="r15">
  <label for="r15" class="react" style="--border-color: #09f; --dot-color1: orange;--dot-color2: yellow;">
    <i data-icon="🎅"></i>
  </label>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
  place-content: center;
  place-items: center;
}

.emoji {
  aspect-ratio: 1 / 1;
}

.react {
  --r: 100px;
  display: inline-grid;
  cursor: pointer;
  width: var(--r);
  height: var(--r);
  border-radius: 50%;
  margin: calc(var(--r) / 3);
  line-height: var(--r);
  text-align: center;
  transform: rotate(0);
}

.react i:before {
  content: attr(data-icon);
  grid-area: 1/1;
  font-style: normal;
  font-size: calc(0.6 * var(--r));
}

.react i {
  filter: grayscale(100%);
  transform: scale(1);
  grid-area: 1/1;
  display: inherit;
  transition: transform 0.6s cubic-bezier(0.5, -12, 1, -12);
}
.react:hover {
  transform: rotate(0.1deg);
  transition: transform 0.25s cubic-bezier(0.5, 400, 0.5, -400);
}
.react:before {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  border: solid var(--border-color) calc(var(--r) / 2);
  transform: scale(0);
}
.react:after,
.react i:after {
  content: "";
  grid-area: 1/1;
  margin: calc(var(--r) / -2);
  --c1: radial-gradient(var(--dot-color1) 50%, #0000 60%);
  --c2: radial-gradient(var(--dot-color2) 50%, #0000 60%);
  background: var(--c1), var(--c1), var(--c1), var(--c1), var(--c2), var(--c2),
    var(--c2), var(--c2);
  background-size: calc(var(--r) / 6) calc(var(--r) / 6);
  background-position: calc(50% - var(--r) / 2) calc(50% - var(--r) / 2),
    calc(50% + var(--r) / 2) calc(50% - var(--r) / 2),
    calc(50% - var(--r) / 2) calc(50% + var(--r) / 2),
    calc(50% + var(--r) / 2) calc(50% + var(--r) / 2),
    calc(50% + 0px) calc(50% + var(--r) * 0.707),
    calc(50% + var(--r) * 0.707) calc(50% + 0px),
    calc(50% - var(--r) * 0.707) calc(50% + 0px),
    calc(50% + 0px) calc(50% - var(--r) * 0.707);
  background-repeat: no-repeat;
  transform: scale(0);
}
.react i:after {
  background-size: calc(var(--r) / 8) calc(var(--r) / 8);
  transform: rotate(60deg) scale(0);
}

input:checked + .react i {
  filter: grayscale(0);
  transform: scale(0.95);
  transition: filter 0.5s 0.5s, transform 1s cubic-bezier(0, 26.67, 0.5, 26.67);
}
input:checked + .react:before {
  border-width: 0;
  transform: scale(1);
  transition: transform 0.5s, border-width 0.5s 0.5s;
}
input:checked + .react:after,
input:checked + .react i:after {
  transform: scale(1);
  opacity: 0;
  background-size: 0 0;
  transition: transform 0.5s 0.5s, opacity 0.4s 0.9s, background-size 0.5s 0.9s;
}
input:checked + .react i:after {
  transform: rotate(55deg) scale(1);
}

input {
  position: absolute;
  visibility: hidden;
  clip-path: inset(50%);
}