Expanding Contact Button

1import { ArrowRight } from "lucide-react";2
3export function ExpandingContactButton() {4  return (5    <button type="button" className="contact-pill">6      <span className="contact-pill-icon" aria-hidden="true">7        <ArrowRight size={18} strokeWidth={2.5} />8      </span>9      <span>Get in touch</span>10    </button>11  );12}

1.contact-pill {2  position: relative;3  display: inline-flex;4  align-items: center;5  width: 36px;6  height: 36px;7  gap: 0;8  overflow: hidden;9  border: 0;10  border-radius: 999px;11  padding: 0;12  background: transparent;13  color: #f0f0f0;14  font-size: 13px;15  font-weight: 500;16  line-height: 1;17  transition: width .32s cubic-bezier(.4, 0, .2, 1), background-color .32s cubic-bezier(.4, 0, .2, 1), color .28s ease;18}19.contact-pill::before {20  content: "";21  position: absolute;22  inset: 0 auto 0 0;23  width: 36px;24  height: 36px;25  border-radius: 50%;26  background: #f97316;27}28.contact-pill-icon,29.contact-pill > span:last-child {30  position: relative;31  z-index: 1;32}33.contact-pill-icon {34  display: grid;35  place-items: center;36  width: 36px;37  height: 36px;38  color: #111;39}40.contact-pill > span:last-child {41  position: absolute;42  left: 47px;43  white-space: nowrap;44  opacity: 0;45  transform: translateX(-5px);46  transition: opacity .18s ease .1s, transform .24s ease .06s;47}48.contact-pill:hover,49.contact-pill:focus-visible {50  width: 145px;51  background: #f4f4f5;52  color: #111;53}54.contact-pill:hover > span:last-child,55.contact-pill:focus-visible > span:last-child {56  opacity: 1;57  transform: translateX(0);58}59.contact-pill:focus-visible {60  outline: 2px solid #f97316;61  outline-offset: 4px;62}