Pricing Slide Link

1import { ArrowRight } from "lucide-react";2
3export function PricingSlideLink() {4  return (5    <button type="button" className="pricing-slide">6      <span className="pricing-slide-icon" aria-hidden="true">7        <ArrowRight size={23} strokeWidth={2.25} />8      </span>9      <span className="pricing-slide-label">Pricing</span>10    </button>11  );12}

1.pricing-slide {2  display: inline-flex;3  align-items: center;4  gap: 8px;5  overflow: hidden;6  border: 0;7  background: transparent;8  padding: 0;9  color: #f0f0f0;10  font-size: 16px;11  font-weight: 500;12  line-height: 1;13  cursor: pointer;14}15.pricing-slide-icon {16  display: flex;17  align-items: center;18  justify-content: center;19  width: 23px;20  height: 23px;21  transform: translateX(-150%);22  transition: transform .5s cubic-bezier(.16, 1, .3, 1);23}24.pricing-slide-label {25  transform: translateX(-16px);26  transition: transform .5s cubic-bezier(.16, 1, .3, 1);27}28.pricing-slide:hover .pricing-slide-icon,29.pricing-slide:focus-visible .pricing-slide-icon {30  transform: translateX(0);31}32.pricing-slide:hover .pricing-slide-label,33.pricing-slide:focus-visible .pricing-slide-label {34  transform: translateX(0);35}36.pricing-slide:focus-visible {37  outline: 2px solid #f97316;38  outline-offset: 5px;39}