Sliding Arrow Label

1import { ArrowRight } from "lucide-react";2
3export function SlidingArrowLabel() {4  return <button type="button" className="sliding-arrow-label"><span className="sliding-arrow-label-copy">Create a blog</span><span className="sliding-arrow-label-icon" aria-hidden="true"><ArrowRight size={16} strokeWidth={2.4} /></span></button>;5}

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