Icon Swap Button

1import { ArrowRight } from "lucide-react";2
3function AppleMark() {4  return (5    <svg className="icon-swap-icon" width="18" height="20" viewBox="0 0 14 16" fill="none" aria-hidden="true">6      <path d="M13.5621 5.45739C13.4857 5.50195 11.6671 6.44248 11.6671 8.52785C11.7528 10.9061 13.9621 11.7401 14 11.7401C13.9621 11.7847 13.6665 12.8763 12.7907 14.0205C12.0956 15.0062 11.3242 16 10.1528 16C9.0385 16 8.6385 15.3431 7.35278 15.3431C5.97203 15.3431 5.58135 16 4.5242 16C3.35277 16 2.52419 14.953 1.79127 13.9766C.839096 12.6986.0297778 10.6931.00120634 8.76747C-.0180484 7.74707.19189 6.74403.72481 5.89206C1.47699 4.70265 2.81985 3.89524 4.28631 3.86862C5.40992 3.83331 6.40992 4.58747 7.09563 4.58747C7.75278 4.58747 8.98135 3.86862 10.3714 3.86862C10.9714 3.86919 12.5714 4.03762 13.5621 5.45739ZM7.0006 3.66488C6.8006 2.73303 7.35278 1.80119 7.86706 1.20677C8.52421.487918 9.5621 0 10.4571 0C10.5143.931848 10.1522 1.84575 9.50496 2.51136C8.92421 3.23021 7.92421 3.77138 7.0006 3.66488Z" fill="currentColor" />7    </svg>8  );9}10
11export function IconSwapButton() {12  return (13    <button type="button" className="icon-swap-button">14      <span className="icon-swap-content">15        <AppleMark />16        <span className="icon-swap-label">Download for iOS</span>17        <span className="icon-swap-arrow" aria-hidden="true">18          <ArrowRight size={17} strokeWidth={2.4} />19        </span>20      </span>21    </button>22  );23}

1.icon-swap-button {2  display: inline-flex;3  align-items: center;4  justify-content: center;5  width: 228px;6  min-height: 56px;7  overflow: hidden;8  border: 1px solid light-dark(#14181e14,#ffffff14);9  border-radius: 12px;10  background: transparent;11  padding: 8px 16px;12  color: light-dark(#14181e,#f0f0f0);13}14.icon-swap-content {15  position: relative;16  display: inline-flex;17  align-items: center;18  gap: 8px;19}20.icon-swap-icon {21  position: relative;22  top: -2px;23  width: 24px;24  height: 24px;25  flex: none;26  color: light-dark(#14181e,#f0f0f0);27  transition: width .52s cubic-bezier(.16, 1, .3, 1), margin .52s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, transform .52s cubic-bezier(.16, 1, .3, 1);28}29.icon-swap-label {30  position: relative;31  z-index: 1;32  white-space: nowrap;33  font-size: 16px;34  font-weight: 500;35}36.icon-swap-arrow {37  display: grid;38  width: 0;39  height: 24px;40  margin-left: -8px;41  overflow: hidden;42  place-items: center;43  opacity: 0;44  transform: translateX(18px);45  transition: width .52s cubic-bezier(.16, 1, .3, 1), margin .52s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, transform .52s cubic-bezier(.16, 1, .3, 1);46}47.icon-swap-button:hover .icon-swap-icon,48.icon-swap-button:focus-visible .icon-swap-icon {49  width: 0;50  margin-right: -8px;51  opacity: 0;52  transform: translateX(-18px);53}54.icon-swap-button:hover .icon-swap-arrow,55.icon-swap-button:focus-visible .icon-swap-arrow {56  width: 24px;57  margin-left: 0;58  opacity: 1;59  transform: translateX(0);60}61.icon-swap-button:focus-visible {62  outline: 2px solid #f97316;63  outline-offset: 3px;64}