Projects Arrow Button

1import { ArrowRight } from "lucide-react";2
3export function ProjectsArrowButton() {4  return (5    <button type="button" className="projects-arrow-button">6      <span>Projects</span>7      <span className="projects-arrow-icon" aria-hidden="true">8        <ArrowRight className="projects-arrow projects-arrow-current" size={18} strokeWidth={2.4} />9        <ArrowRight className="projects-arrow projects-arrow-incoming" size={18} strokeWidth={2.4} />10      </span>11    </button>12  );13}

1.projects-arrow-button {2  display: inline-flex;3  align-items: center;4  gap: 9px;5  border: 0;6  background: transparent;7  color: light-dark(#14181e,#f0f0f0);8  font-size: 16px;9  font-weight: 500;10  letter-spacing: .5px;11}12.projects-arrow-icon {13  position: relative;14  display: grid;15  width: 32px;16  height: 32px;17  place-items: center;18  overflow: hidden;19  border: 1px solid currentColor;20  border-radius: 999px;21}22.projects-arrow {23  position: absolute;24  transition: transform .48s cubic-bezier(.16, 1, .3, 1);25}26.projects-arrow-incoming {27  transform: translateX(-25px);28}29.projects-arrow-button:hover .projects-arrow-current, .projects-arrow-button:focus-visible .projects-arrow-current {30  transform: translateX(25px);31}32.projects-arrow-button:hover .projects-arrow-incoming, .projects-arrow-button:focus-visible .projects-arrow-incoming {33  transform: translateX(0);34}35.projects-arrow-button:focus-visible {36  outline: 2px solid #f97316;37  outline-offset: 4px;38}