Project Text Swap Button

1export function ProjectTextSwapButton() {2  return (3    <button type="button" className="project-text-swap-button">4      <span className="project-text-swap-label project-text-swap-label-current">5        Start a Project6      </span>7      <span8        className="project-text-swap-label project-text-swap-label-incoming"9        aria-hidden="true"10      >11        Start a Project12      </span>13    </button>14  );15}

1.project-text-swap-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: 100%;9  max-width: 176px;10  overflow: hidden;11  border: 1px solid light-dark(#14181e,#f0f0f0);12  border-radius: 999px;13  background: transparent;14  padding: 12px 32px;15  color: light-dark(#14181e,#f0f0f0);16  text-align: center;17  font-family: Arial, Helvetica, sans-serif;18  cursor: pointer;19}20.project-text-swap-label {21  z-index: 1;22  display: flex;23  white-space: nowrap;24  font-size: 16px;25  font-weight: 400;26  line-height: normal;27  transition: transform .36s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;28}29.project-text-swap-label-current {30  position: relative;31}32.project-text-swap-label-incoming {33  position: absolute;34  opacity: 0;35  transform: translateY(160%);36}37.project-text-swap-button:hover .project-text-swap-label-current,38.project-text-swap-button:focus-visible .project-text-swap-label-current {39  opacity: 0;40  transform: translateY(-160%);41}42.project-text-swap-button:hover .project-text-swap-label-incoming,43.project-text-swap-button:focus-visible .project-text-swap-label-incoming {44  opacity: 1;45  transform: translateY(0);46}47.project-text-swap-button:focus-visible {48  outline: 2px solid #f97316;49  outline-offset: 4px;50}