Read More Swap

1import { ArrowRight } from "lucide-react";2
3export function ReadMoreSwap() {4  return (5    <button type="button" className="read-more-swap">6      <ArrowRight className="read-more-arrow read-more-arrow-left" size={25} strokeWidth={2.5} />7      <span>Read more</span>8      <ArrowRight className="read-more-arrow read-more-arrow-right" size={25} strokeWidth={2.5} />9    </button>10  );11}

1.read-more-swap {2  display: inline-flex;3  align-items: center;4  gap: 12px;5  height: 48px;6  border: 0;7  overflow: hidden;8  background: transparent;9  color: #f0f0f0;10  font-size: 16px;11  font-weight: 500;12}13.read-more-arrow {14  flex: 0 0 25px;15  width: 25px;16  transition: flex-basis .24s ease, width .24s ease, opacity .2s ease, transform .24s ease;17}18.read-more-arrow-left {19  flex-basis: 0;20  width: 0;21  color: #f97316;22  opacity: 0;23  transform: translateX(-12px);24}25.read-more-swap:hover .read-more-arrow-left, .read-more-swap:focus-visible .read-more-arrow-left {26  flex-basis: 25px;27  width: 25px;28  opacity: 1;29  transform: translateX(0);30}31.read-more-swap:hover .read-more-arrow-right, .read-more-swap:focus-visible .read-more-arrow-right {32  flex-basis: 0;33  width: 0;34  opacity: 0;35  transform: translateX(12px);36}37.read-more-swap:focus-visible {38  outline: 2px solid #f97316;39  outline-offset: 4px;40}