White Contact Orbit Button

1"use client";2
3import { ArrowRight } from "lucide-react";4
5import "./white-contact-orbit-button.css";6
7export function WhiteContactOrbitButton() {8  return (9    <button type="button" className="white-contact-orbit-button">10      <span className="white-contact-orbit-button-label">Get in touch</span>11      <span className="white-contact-orbit-button-icon" aria-hidden="true">12        <span className="white-contact-orbit-button-icon-surface" />13        <ArrowRight size={21} strokeWidth={2.6} />14      </span>15    </button>16  );17}

1.white-contact-orbit-button {2  appearance: none;3  position: relative;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  width: 160px;8  height: 50px;9  overflow: hidden;10  border: 0;11  border-radius: 999px;12  padding: 0;13  background: #fff;14  color: #111;15  font-family: Arial, Helvetica, sans-serif;16  cursor: pointer;17}18.white-contact-orbit-button-label {19  position: relative;20  z-index: 1;21  margin-right: 20px;22  font-size: 16px;23  font-weight: 400;24  line-height: 1;25  letter-spacing: -.03em;26  transition: transform .5s cubic-bezier(.16, 1, .3, 1);27}28.white-contact-orbit-button-icon {29  position: absolute;30  right: 8px;31  display: grid;32  width: 34px;33  height: 34px;34  place-items: center;35  border-radius: 50%;36  color: #111;37  transition: color .12s ease;38}39.white-contact-orbit-button-icon-surface {40  position: absolute;41  inset: 0;42  border-radius: inherit;43  background: #111;44  transform: scale(0);45  transform-origin: center;46  transition: transform .42s cubic-bezier(.16, 1, .3, 1);47}48.white-contact-orbit-button-icon svg {49  position: relative;50  z-index: 1;51  transition: transform .5s cubic-bezier(.16, 1, .3, 1);52}53.white-contact-orbit-button:hover .white-contact-orbit-button-icon,54.white-contact-orbit-button:focus-visible .white-contact-orbit-button-icon {55  color: #fff;56  transition-delay: .08s;57}58.white-contact-orbit-button:hover .white-contact-orbit-button-icon-surface,59.white-contact-orbit-button:focus-visible .white-contact-orbit-button-icon-surface {60  transform: scale(1);61}62.white-contact-orbit-button:hover .white-contact-orbit-button-icon svg,63.white-contact-orbit-button:focus-visible .white-contact-orbit-button-icon svg {64  transform: rotate(-45deg);65}66.white-contact-orbit-button:focus-visible {67  outline: 2px solid #fff;68  outline-offset: 4px;69}70@media (prefers-reduced-motion: reduce) {71  .white-contact-orbit-button-icon,72  .white-contact-orbit-button-icon-surface,73  .white-contact-orbit-button-icon svg {74  transition: none;75}76}