n

HTML

<div class="clv">
  <ul class="cl">
    <li class="ci bi">
      <a href="#" class="clnk">
        
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path fill="currentColor" d="m21.39 19.58-1.905 1.905s-4.95 2.122-12.02-4.95c-7.072-7.07-4.95-12.02-4.95-12.02L4.42 2.61a2 2 0 0 1 3.014.214l1.818 2.424a2 2 0 0 1-.186 2.615L7.464 9.465s0 1.414 2.829 4.242c2.828 2.829 4.243 2.829 4.243 2.829l1.601-1.602a2 2 0 0 1 2.615-.186l2.424 1.818a2 2 0 0 1 .214 3.014Z"/>
        </svg>
      </a>
    </li>
    <li class="ci bi">
      <a href="#" class="clnk">
        
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12c0 2.251.744 4.329 2 6v2.77a1 1 0 0 0 1.203.98L8 21.168A9.966 9.966 0 0 0 12 22Zm-5.295-8.293 2.75-3.93a1 1 0 0 1 1.35-.274l2.647 1.655a1 1 0 0 0 1.085-.016l2.172-1.448a.426.426 0 0 1 .586.6l-2.75 3.928a1 1 0 0 1-1.35.275l-2.648-1.655a1 1 0 0 0-1.084.016L7.29 14.306a.426.426 0 0 1-.586-.599Z"/>
        </svg>
      </a>
    </li>
    <li class="ci bi">
      <a href="#" class="clnk">
        
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21.7143L19.4243 21.3679C20.9022 21.1568 22 19.891 22 18.3981V6.459C22 4.63335 20.383 3.23096 18.5757 3.48915L17 3.71426V21.7143Z" fill="currentColor"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15 22L9 20V2L15 4V22Z" fill="currentColor"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.57573 2.63203L7 2.28571V20.2857L5.42426 20.5108C3.61696 20.769 2 19.3666 2 17.541V5.60188C2 4.10893 3.09779 2.84316 4.57573 2.63203Z" fill="currentColor"/>
        </svg>
      </a>
    </li>
  </ul>
  <div class="btn bi">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512">
      <path d="M294.6 166.6L317.3 144 272 98.7l-22.6 22.6L160 210.7 70.6 121.4 48 98.7 2.7 144l22.6 22.6L114.7 256 25.4 345.4 2.7 368 48 413.3l22.6-22.6L160 301.3l89.4 89.4L272 413.3 317.3 368l-22.6-22.6L205.3 256l89.4-89.4z"/>
    </svg>
  </div>
</div>

CSS

/* wrapper */
.clv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* button item */
.bi {
  width: 45px;
  height: 45px;
  border-radius: 100rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bi svg {
  height: 26px;
}
.bi:hover::before {
  left: auto;
  right: 0;
  width: 100%;
}
.bi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #fff;
  opacity: 0.1;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* list */
.cl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: linear 0.2s;
  visibility: visible;
  opacity: 1;
}
.cl.hidden {
  visibility: hidden;
  opacity: 0;
}

/* toggle button */
.btn {
  background: #e11d48;
  transition: linear 0.2s;
}
.btn.active {
  transform: rotate(-45deg);
}

/* color items */
.ci:first-child {
  background: #ea580c;
}
.ci:nth-child(2) {
  background: #0891b2;
}
.ci:nth-child(3) {
  background: #16a34a;
}

JS