/* wrapper alignment */
.tdbtn-wrap{ display:block; }
.tdbtn-wrap.tdbtn-align-left{ text-align:left; }
.tdbtn-wrap.tdbtn-align-center{ text-align:center; }
.tdbtn-wrap.tdbtn-align-right{ text-align:right; }

.tdbtn-group{
  display:inline-flex;
  width:fit-content;
  --tdbtn-overlap:52px;
}

/* transitions */
.tdbtn-group > *{
  transition:transform .35s ease, margin .35s ease;
  will-change:transform, margin;
  text-decoration:none;
}

/* default state (same as your SCSS) */
.tdbtn-group > *:nth-child(1){
  transform:scale3d(.5,.5,1);
  margin-inline-end: calc(var(--tdbtn-overlap) * -1);
}
.tdbtn-group > *:nth-child(2){
  transform:scale3d(1,1,1);
}
.tdbtn-group > *:nth-child(3){
  transform:scale3d(1,1,1);
  margin-inline-start:0;
}

/* hover state */
.tdbtn-group:hover > *:nth-child(1){
  transform:scale3d(1,1,1);
  margin-inline-end:0;
}
.tdbtn-group:hover > *:nth-child(3){
  transform:scale3d(.5,.5,1);
  margin-inline-start: calc(var(--tdbtn-overlap) * -1);
}

/* circle */
.tdbtn-btn-circle{
  width:54px;
  height:54px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#00db69;
  color:#004538;
  font-size:16px;
  line-height:1;
}

/* icon angle */
.tdbtn-btn-circle i{
  transform:rotate(-45deg);
}

/* pill */
.tdbtn-btn-main{
  display:flex;
  align-items:center;
  background:#00db69;
  color:#004538;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  padding:20px 35px;
  border-radius:30px;
  line-height:1;
  position:relative;
  z-index:1;
  white-space:nowrap;
}