View More Text Swap

1export function ViewMoreTextSwap() {2  return (3    <button type="button" className="view-more-text-swap">4      <span className="view-more-text-swap-label view-more-text-swap-label-current">5        View More6      </span>7      <span8        className="view-more-text-swap-label view-more-text-swap-label-incoming"9        aria-hidden="true"10      >11        View More12      </span>13    </button>14  );15}

1.view-more-text-swap {2  appearance: none;3  position: relative;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  overflow: hidden;8  border: 0;9  background: transparent;10  padding: 0;11  color: #f0f0f0;12  font-family: Arial, Helvetica, sans-serif;13  cursor: pointer;14}15.view-more-text-swap-label {16  z-index: 1;17  display: flex;18  white-space: nowrap;19  font-size: 16px;20  font-weight: 400;21  line-height: normal;22  transition: transform .36s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;23}24.view-more-text-swap-label-current {25  position: relative;26}27.view-more-text-swap-label-incoming {28  position: absolute;29  opacity: 0;30  transform: translateY(160%);31}32.view-more-text-swap:hover .view-more-text-swap-label-current,33.view-more-text-swap:focus-visible .view-more-text-swap-label-current {34  opacity: 0;35  transform: translateY(-160%);36}37.view-more-text-swap:hover .view-more-text-swap-label-incoming,38.view-more-text-swap:focus-visible .view-more-text-swap-label-incoming {39  opacity: 1;40  transform: translateY(0);41}42.view-more-text-swap:focus-visible {43  outline: 2px solid #f97316;44  outline-offset: 4px;45}