Get Started Circle Swap

1import "./styles.css";2
3import { ArrowRight } from "lucide-react";4
5export function GetStartedCircleSwap() {6  return (7    <button type="button" className="get-started-circle-swap">8      <span className="get-started-circle-swap__label">Get started</span>9      <span className="get-started-circle-swap__circle" aria-hidden="true" />10      <span className="get-started-circle-swap__arrow" aria-hidden="true">11        <ArrowRight size={19} strokeWidth={2.4} />12      </span>13    </button>14  );15}

1.get-started-circle-swap,2.get-started-circle-swap * {3  box-sizing: border-box;4}5.get-started-circle-swap {6  appearance: none;7  position: relative;8  display: inline-flex;9  width: min(170px, calc(100vw - 40px));10  height: 50px;11  align-items: center;12  overflow: hidden;13  border: 1px solid #48484f;14  border-radius: 999px;15  background: #15151b;16  padding: 0 52px 0 20px;17  color: #f7f7fa;18  font-family: Arial, Helvetica, sans-serif;19  cursor: pointer;20  transition: border-color .3s ease, background-color .3s ease;21}22.get-started-circle-swap__label {23  white-space: nowrap;24  font-size: 15px;25  font-weight: 400;26  letter-spacing: -.35px;27  line-height: 1;28  text-transform: uppercase;29}30.get-started-circle-swap__circle,31.get-started-circle-swap__arrow {32  position: absolute;33  right: 9px;34  top: 50%;35  width: 30px;36  height: 30px;37  border-radius: 50%;38}39.get-started-circle-swap__circle {40  right: 14px;41  width: 20px;42  height: 20px;43  background: #f97316;44  transform: translate(0, -50%);45  transition: transform .42s cubic-bezier(.16, 1, .3, 1);46}47.get-started-circle-swap__arrow {48  display: grid;49  place-items: center;50  color: #f7f7fa;51  transform: translate(-24px, -50%);52  opacity: 0;53  transition: opacity .18s ease, transform .42s cubic-bezier(.16, 1, .3, 1);54}55.get-started-circle-swap:hover,56.get-started-circle-swap:focus-visible {57  border-color: #5a5a62;58  background: #18181e;59}60.get-started-circle-swap:hover .get-started-circle-swap__circle,61.get-started-circle-swap:focus-visible .get-started-circle-swap__circle {62  transform: translate(42px, -50%);63}64.get-started-circle-swap:hover .get-started-circle-swap__arrow,65.get-started-circle-swap:focus-visible .get-started-circle-swap__arrow {66  opacity: 1;67  transform: translate(0, -50%);68}69.get-started-circle-swap:focus-visible {70  outline: 2px solid #f97316;71  outline-offset: 4px;72}73@media (prefers-reduced-motion: reduce) {74  .get-started-circle-swap,75  .get-started-circle-swap__circle,76  .get-started-circle-swap__arrow {77  transition: none;78}79}