See More Swap Button

1import { ArrowDown } from "lucide-react";2
3export function SeeMoreSwapButton() {4  return (5    <button type="button" className="see-more-swap-button">6      <span className="see-more-swap-content">7        <span className="see-more-swap-icon see-more-swap-icon-left" aria-hidden="true">8          <ArrowDown size={20} strokeWidth={2.4} />9        </span>10        <span className="see-more-swap-label">See more</span>11        <span className="see-more-swap-icon see-more-swap-icon-right" aria-hidden="true">12          <ArrowDown size={20} strokeWidth={2.4} />13        </span>14      </span>15    </button>16  );17}

1.see-more-swap-button {2  box-sizing: border-box;3  appearance: none;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  width: 196px;8  overflow: hidden;9  border: 0;10  border-radius: 999px;11  background: #f0f0f0;12  padding: 12px 16px;13  color: #101016;14  font-family: Arial, Helvetica, sans-serif;15  cursor: pointer;16  transition: background-color .5s cubic-bezier(.16, 1, .3, 1), color .5s cubic-bezier(.16, 1, .3, 1);17}18.see-more-swap-content {19  position: relative;20  display: flex;21  height: 40px;22  width: 100%;23  align-items: center;24  justify-content: center;25}26.see-more-swap-label {27  position: relative;28  z-index: 1;29  white-space: nowrap;30  text-align: center;31  font-size: 16px;32  font-weight: 500;33  line-height: normal;34  transform: translateX(16px);35  transition: transform .5s cubic-bezier(.16, 1, .3, 1);36}37.see-more-swap-icon {38  position: absolute;39  display: grid;40  width: 40px;41  height: 40px;42  place-items: center;43  border-radius: 50%;44  transition: transform .5s cubic-bezier(.16, 1, .3, 1);45}46.see-more-swap-icon-left {47  left: 0;48  background: #101016;49  color: #fff;50}51.see-more-swap-icon-right {52  right: 0;53  background: #fff;54  color: #101016;55  transform: translateX(64px);56}57.see-more-swap-button:hover,58.see-more-swap-button:focus-visible {59  background: #22222d;60  color: #f0f0f0;61}62.see-more-swap-button:hover .see-more-swap-icon-left,63.see-more-swap-button:focus-visible .see-more-swap-icon-left {64  transform: translateX(-64px);65}66.see-more-swap-button:hover .see-more-swap-icon-right,67.see-more-swap-button:focus-visible .see-more-swap-icon-right {68  transform: translateX(0);69}70.see-more-swap-button:hover .see-more-swap-label,71.see-more-swap-button:focus-visible .see-more-swap-label {72  transform: translateX(-16px);73}74.see-more-swap-button:focus-visible {75  outline: 2px solid #f97316;76  outline-offset: 4px;77}