import { ArrowDown } from "lucide-react"; export function SeeMoreSwapButton() { return ( ); } /* see-more-swap-button.css */ .see-more-swap-button { box-sizing: border-box; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 196px; overflow: hidden; border: 0; border-radius: 999px; background: #f0f0f0; padding: 12px 16px; color: #101016; font-family: Arial, Helvetica, sans-serif; cursor: pointer; transition: background-color .42s cubic-bezier(.16, 1, .3, 1), color .42s cubic-bezier(.16, 1, .3, 1); } .see-more-swap-content { position: relative; display: flex; height: 40px; width: 100%; align-items: center; justify-content: center; } .see-more-swap-label { position: relative; z-index: 1; white-space: nowrap; text-align: center; font-size: 16px; font-weight: 500; line-height: normal; transform: translateX(16px); transition: transform .42s cubic-bezier(.16, 1, .3, 1); } .see-more-swap-icon { position: absolute; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; transition: transform .42s cubic-bezier(.16, 1, .3, 1); } .see-more-swap-icon-left { left: 0; background: #101016; color: #fff; } .see-more-swap-icon-right { right: 0; background: #fff; color: #101016; transform: translateX(64px); } .see-more-swap-button:hover, .see-more-swap-button:focus-visible { background: #22222d; color: #f0f0f0; } .see-more-swap-button:hover .see-more-swap-icon-left, .see-more-swap-button:focus-visible .see-more-swap-icon-left { transform: translateX(-64px); } .see-more-swap-button:hover .see-more-swap-icon-right, .see-more-swap-button:focus-visible .see-more-swap-icon-right { transform: translateX(0); } .see-more-swap-button:hover .see-more-swap-label, .see-more-swap-button:focus-visible .see-more-swap-label { transform: translateX(-16px); } .see-more-swap-button:focus-visible { outline: 2px solid #f97316; outline-offset: 4px; }

See More Swap Button