<!--Radio button-->
<div class="main">
<input type="radio" name="checkbox" class="check" id="radio1" checked/>
<label for="radio1">
  <div class="container">
    <div class="cRadioBtn">
      <div class="overlay"></div>
      <div class="drops xsDrop"></div>
      <div class="drops mdDrop"></div>
      <div class="drops lgDrop"></div>
    </div>
  </div>
  <h2>Party</h2>
</label>
<input type="radio" name="checkbox" class="check" id="radio2" />
<label for="radio2">
  <div class="container">
    <div class="cRadioBtn">
      <div class="overlay"></div>
      <div class="drops xsDrop"></div>
      <div class="drops mdDrop"></div>
      <div class="drops lgDrop"></div>
    </div>
  </div>
  <h2>No Party</h2>
</label>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  --primary: #2a5fff;
  --secondary: #fffff;
  --border-color: #d4d7eb;
}

html {
  height: 100%;
 background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  font-family : Poppins;
  color : white;
}

body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

input[type="radio"] {
  display: none;
}

label {
  display : flex;
  padding :10px;
  gap :2em;
  align-items : center
}

.container {
  width :50px;
  aspect-ratio : 1;
  overflow : hidden;
  border-radius : 50%;
  box-shadow : 2px 5px 5px rgba(0,0,0,0.2);
}

.cRadioBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  position: relative;
  border: solid 5px var(--border-color);
  box-sizing: border-box;
  transition: all 0.1s ease-in;
  cursor: pointer;
  
}

.cRadioBtn:hover {
  border: solid 8px var(--primary);
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--secondary);
}

.check:checked + label > .container > .cRadioBtn > .overlay {
  background: #fff;
  animation: shrink 0.3s ease-in-out forwards;
}

.check:checked + label > .container  > .cRadioBtn {
  background: var(--primary);
  border-color: var(--primary);
}

.drops {
  position: absolute;
  background: #fff;
  top: -100%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%;
  aspect-ratio: 1;
}

.lgDrop {
  width: 50%;
}

.xsDrop {
  width: 20%;
}

.mdDrop {
  width: 30%;
}

.check:checked + label > .container  > .cRadioBtn > .lgDrop {
  animation: drop 0.5s ease-in-out forwards;
}

.check:checked + label > .container  > .cRadioBtn > .mdDrop {
  animation: drop 0.8s ease-in forwards;
}

.check:checked + label > .container  > .cRadioBtn > .xsDrop {
  animation: drop 0.9s linear forwards;
}

@keyframes drop {
  0% {
    top: -100%;
  }
  50% {
    top: -100%;
  }
  75% {
    top: 10%;
  }
  100% {
    top: 25%;
  }
}

@keyframes shrink {
  0% {
    width: 100%;
  }
  100% {
    width: 0px;
  }
}