Contact Reveal Button

1import { ArrowRight } from "lucide-react";2
3export function ContactRevealButton() {4  return (5    <button type="button" className="contact-reveal">6      <span className="contact-reveal-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-reveal {2  position: relative;3  display: inline-flex;4  align-items: center;5  gap: 10px;6  box-sizing: border-box;7  width: 145px;8  overflow: hidden;9  border: 0;10  border-radius: 999px;11  padding: 0 15px 0 0;12  background: transparent;13  color: #f0f0f0;14  font-size: 13px;15  font-weight: 500;16  line-height: 1;17  transition: color .28s ease;18}19.contact-reveal::before {20  content: "";21  position: absolute;22  inset: 0 auto 0 0;23  width: 36px;24  border-radius: inherit;25  background: #f0f0f0;26  transition: width .32s cubic-bezier(.4, 0, .2, 1);27}28.contact-reveal-icon,29.contact-reveal > span:last-child {30  position: relative;31  z-index: 1;32}33.contact-reveal-icon {34  display: grid;35  place-items: center;36  width: 36px;37  height: 36px;38  flex: none;39  border-radius: 50%;40  color: #111;41  transition: background-color .2s ease .12s;42}43.contact-reveal:hover::before,44.contact-reveal:focus-visible::before {45  width: 100%;46}47.contact-reveal:hover .contact-reveal-icon,48.contact-reveal:focus-visible .contact-reveal-icon {49  background: #f97316;50}51.contact-reveal:hover,52.contact-reveal:focus-visible {53  color: #111;54}55.contact-reveal:focus-visible {56  outline: 2px solid #f97316;57  outline-offset: 4px;58}