<div class="wrapper">
  <div class="questDiv">What is the best dessert?</div>
  <div class="inputDiv">
    <input type="radio" name="radios" id="radio_01" />
    <label for="radio_01">
      <div class="divSelect"></div>Ice cream
    </label>
  </div>

  <div class="inputDiv">
    <input type="radio" name="radios" id="radio_02" />
    <label for="radio_02">
      <div class="divSelect"></div>Cookies
    </label>
  </div>

  <div class="inputDiv">
    <input type="radio" name="radios" id="radio_03" />
    <label for="radio_03">
      <div class="divSelect"></div>Croissant
    </label>
  </div>

  <div class="inputDiv">
    <input type="radio" name="radios" id="radio_04" />
    <label for="radio_04">
      <div class="divSelect"></div>Fruit
    </label>
  </div>
</div>
:root {
  --sizeVar: 8vmin;
  --colorVar: #ff69b4;
  --colorVar-light: #ffcce6;
  --colorVar-hover: #666666;
}
body {
  display: flex;
  height: 97vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  background-color: lightgray;
}
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sizeVar);
  font-size: var(--sizeVar);
  color: #333333;
  background-color: white;
  padding: 30px 60px;
  border-radius: 16px;
  box-shadow: 0px 2px 15px #ff69b477, 0px 8px 80px #ff69b433;
}
input {
  visibility: hidden;
}
.inputDiv {
  position: relative;
  margin-left: calc(var(--sizeVar) / 1.2);
}
label {
  cursor: pointer;
  transition: color 150ms linear 0s, opacity 150ms linear 0s;
}
label:hover {
  color: var(--colorVar-hover);
}
input:checked + label {
  color: var(--colorVar);
  cursor: default;
}
input:checked + label .divSelect::before,
input:checked + label .divSelect::after {
  transform: translateY(5%);
  line-height: 4vmin;
}
input:checked + label .divSelect::before {
  animation: headNod 1000ms ease-in-out infinite;
  transform: translateY(10%);
  animation-delay: 500ms;
}
.divSelect {
  position: absolute;
  width: var(--sizeVar);
  height: var(--sizeVar);
  top: 0.1vw;
  left: 0;
  border: 2px solid;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-70%, 10%);
}
.divSelect::before,
.divSelect::after {
  content: "•ٮ•";
  color: black;
  text-align: center;
  line-height: 2vmin;
  font-size: calc(var(--sizeVar) / 3.5);
  position: absolute;
  width: 54%;
  height: 50%;
  top: 10%;
  left: 24%;
  background: var(--colorVar);
  background: radial-gradient(
    circle,
    var(--colorVar-light) 0%,
    var(--colorVar) 100%
  );
  border-radius: 50%;
  transform: translateY(250%);
  transition: transform 300ms ease-in-out 0s,
    line-height 400ms cubic-bezier(0.18, -0.39, 0.82, 1.45) 100ms;
}
.divSelect::after {
  content: "";
  top: 65%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: transform 300ms ease-in-out 0s;
}
.questDiv {
  font-weight: 600;
}

@keyframes headNod {
  0% {
    line-height: 4vmin;
    transform: translateY(10%);
  }
  50% {
    line-height: 3vmin;
    transform: translateY(0);
  }
  100% {
    line-height: 4vmin;
    transform: translateY(10%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.