Talk Arrow Reveal Button

1function LongArrowMark() {2  return (3    <svg viewBox="0 0 120 55" fill="none" aria-hidden="true">4      <path d="M95.2389 0.989578C93.8845 -0.376811 91.7407 -0.321332 90.4505 1.11345C89.1602 2.54775 89.2126 4.81806 90.5674 6.18445L95.2389 0.989578ZM114.277 30.0975C115.631 31.4638 117.775 31.4084 119.066 29.9736C120.356 28.5393 120.303 26.269 118.949 24.9026L114.277 30.0975ZM118.949 30.0975C120.303 28.7311 120.356 26.4608 119.066 25.0265C117.775 23.5917 115.631 23.5362 114.277 24.9026L118.949 30.0975ZM90.5674 48.8156C89.2126 50.1818 89.1602 52.4522 90.4505 53.8868C91.7407 55.3213 93.8845 55.3767 95.2389 54.0105L90.5674 48.8156ZM116.613 31.087C118.483 31.087 120 29.481 120 27.5C120 25.5191 118.483 23.9131 116.613 23.9131L116.613 31.087ZM3.38709 25.894C1.51647 25.894 -1.20206e-06 27.5 -1.11547e-06 29.481C-1.02888e-06 31.4619 1.51647 33.0679 3.38709 33.0679L3.38709 25.894ZM90.5674 6.18445L114.277 30.0975L118.949 24.9026L95.2389 0.989578L90.5674 6.18445ZM114.277 24.9026L90.5674 48.8156L95.2389 54.0105L118.949 30.0975L114.277 24.9026ZM116.613 23.9131L3.38709 25.894L3.38709 33.0679L116.613 31.087L116.613 23.9131Z" fill="currentColor" />5    </svg>6  );7}8
9export function TalkArrowRevealButton() {10  return (11    <button type="button" className="talk-arrow-reveal-button">12      <span className="talk-arrow-reveal-label">Talk to us</span>13      <span className="talk-arrow-reveal-icon">14        <LongArrowMark />15      </span>16    </button>17  );18}

1.talk-arrow-reveal-button {2  box-sizing: border-box;3  appearance: none;4  position: relative;5  display: inline-flex;6  align-items: center;7  justify-content: center;8  width: 120px;9  min-height: 48px;10  overflow: hidden;11  border: 1px solid light-dark(#14181e33,#f0f0f033);12  border-radius: 999px;13  background: transparent;14  padding: 8px 24px;15  color: light-dark(#14181e,#f0f0f0);16  font-family: Arial, Helvetica, sans-serif;17  cursor: pointer;18  transition: background-color .29s ease, color .29s ease;19}20.talk-arrow-reveal-label {21  position: relative;22  z-index: 1;23  display: flex;24  align-items: center;25  white-space: nowrap;26  font-size: 16px;27  font-weight: 500;28  line-height: normal;29  transition: transform .46s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;30}31.talk-arrow-reveal-icon {32  position: absolute;33  z-index: 1;34  display: flex;35  align-items: center;36  justify-content: center;37  color: light-dark(#f6f7f9,#111);38  transform: translateX(-80px);39  transition: transform .46s cubic-bezier(.16, 1, .3, 1);40}41.talk-arrow-reveal-icon svg {42  display: block;43  width: 48px;44  height: auto;45}46.talk-arrow-reveal-button:hover,47.talk-arrow-reveal-button:focus-visible {48  background: #f97316;49  color: light-dark(#f6f7f9,#111);50}51.talk-arrow-reveal-button:hover .talk-arrow-reveal-label,52.talk-arrow-reveal-button:focus-visible .talk-arrow-reveal-label {53  opacity: 0;54  transform: translateX(128px);55}56.talk-arrow-reveal-button:hover .talk-arrow-reveal-icon,57.talk-arrow-reveal-button:focus-visible .talk-arrow-reveal-icon {58  transform: translateX(0);59}60.talk-arrow-reveal-button:focus-visible {61  outline: 2px solid #f97316;62  outline-offset: 4px;63}