Icon Morph Button

<button class="morph-btn" id="morph-btn">
  <svg class="morph-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
    <line class="ml1" x1="12" y1="5" x2="12" y2="19"></line>
    <line class="ml2" x1="5" y1="12" x2="19" y2="12"></line>
  </svg>
  <span class="morph-label">Add Item</span>
</button>

.morph-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #fff;
  color: #1a1a1a;
  border: 1.5px solid #e5e5e5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.morph-btn.checked {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.morph-svg {
  width: 18px;
  height: 18px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.morph-btn.checked .morph-svg {
  stroke: #4ade80;
}
.ml1, .ml2 {
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.morph-btn.checked .ml1 {
  x1: 4; y1: 12; x2: 9; y2: 18;
}
.morph-btn.checked .ml2 {
  x1: 9; y1: 18; x2: 20; y2: 6;
}

const btn = document.getElementById('morph-btn');
const l1 = btn.querySelector('.ml1');
const l2 = btn.querySelector('.ml2');
const label = btn.querySelector('.morph-label');
btn.addEventListener('click', () => {
  const checked = btn.classList.toggle('checked');
  if (checked) {
    l1.setAttribute('x1','4'); l1.setAttribute('y1','12');
    l1.setAttribute('x2','9'); l1.setAttribute('y2','18');
    l2.setAttribute('x1','9'); l2.setAttribute('y1','18');
    l2.setAttribute('x2','20'); l2.setAttribute('y2','6');
    label.textContent = 'Added';
  } else {
    l1.setAttribute('x1','12'); l1.setAttribute('y1','5');
    l1.setAttribute('x2','12'); l1.setAttribute('y2','19');
    l2.setAttribute('x1','5'); l2.setAttribute('y1','12');
    l2.setAttribute('x2','19'); l2.setAttribute('y2','12');
    label.textContent = 'Add Item';
  }
});