Sliding Send Button

1import "./styles.css";2
3export function SlidingSendButton() {4  return (5    <button type="button" className="sliding-send-button">6      <span className="sliding-send-button__content">7        <span className="sliding-send-button__label">Share it now</span>8        <span className="sliding-send-button__icon" aria-hidden="true">9          <svg viewBox="0 0 32 32" fill="none">10            <path d="M28.14 4.94 19.6 27.72c-.4 1.06-1.87 1.1-2.33.06l-4.04-9.05-9.03-4.02c-1.04-.46-1-1.93.06-2.33L27.04 3.86c.74-.28 1.38.34 1.1 1.08Z" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round" />11            <path d="m13.02 18.63 5.75-5.75" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />12          </svg>13        </span>14      </span>15    </button>16  );17}

1.sliding-send-button,2.sliding-send-button * {3  box-sizing: border-box;4}5.sliding-send-button {6  appearance: none;7  display: inline-flex;8  width: min(170px, calc(100vw - 40px));9  height: 50px;10  align-items: center;11  justify-content: center;12  overflow: hidden;13  border: 1px solid #48484f;14  border-radius: 999px;15  background: #15151b;16  padding: 0;17  color: #f7f7fa;18  font-family: Arial, Helvetica, sans-serif;19  cursor: pointer;20  transition: border-color .3s ease, background-color .3s ease;21}22.sliding-send-button__content {23  position: relative;24  display: flex;25  width: 100%;26  align-items: center;27  justify-content: center;28}29.sliding-send-button__label {30  white-space: nowrap;31  font-size: 16px;32  font-weight: 400;33  letter-spacing: -.4px;34  line-height: 1;35  transition: transform .45s cubic-bezier(.16, 1, .3, 1);36}37.sliding-send-button__icon {38  position: absolute;39  left: calc(50% - 59px);40  display: grid;41  width: 20px;42  height: 20px;43  place-items: center;44  color: #f97316;45  transform: translateX(-12px) scale(0);46  transition: transform .45s cubic-bezier(.16, 1, .3, 1);47}48.sliding-send-button__icon svg {49  width: 100%;50  height: 100%;51  transform: rotate(-5deg);52}53.sliding-send-button:hover,54.sliding-send-button:focus-visible {55  border-color: #5a5a62;56  background: #18181e;57}58.sliding-send-button:hover .sliding-send-button__label,59.sliding-send-button:focus-visible .sliding-send-button__label {60  transform: translateX(17px);61}62.sliding-send-button:hover .sliding-send-button__icon,63.sliding-send-button:focus-visible .sliding-send-button__icon {64  transform: translateX(0) scale(1);65}66.sliding-send-button:focus-visible {67  outline: 2px solid #f97316;68  outline-offset: 5px;69}70@media (prefers-reduced-motion: reduce) {71  .sliding-send-button,72  .sliding-send-button__label,73  .sliding-send-button__icon {74  transition: none;75}76}