Floating Newsletter Button

1import "./floating-newsletter-button.css";2
3export function FloatingNewsletterButton() {4  return (5    <button type="button" className="floating-newsletter-button">6      <span className="floating-newsletter-button__content">7        <span>Newsletter</span>8        <svg className="floating-newsletter-button__arrow" viewBox="0 0 20 32" fill="none" aria-hidden="true">9          <path d="M3 3 16 16 3 29" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />10        </svg>11      </span>12    </button>13  );14}

1.floating-newsletter-button {2  display: inline-flex;3  align-items: center;4  justify-content: center;5  border: 0;6  border-radius: 9999px;7  background: light-dark(#f6f7f9,#0d0f12);8  padding: 18px 34px;9  color: light-dark(#14181e,#f5f5f7);10  font-size: 17px;11  font-weight: 400;12  line-height: 1.2;13  letter-spacing: -.3px;14  cursor: pointer;15  transition:16    box-shadow 420ms cubic-bezier(.22, 1, .36, 1);17}18.floating-newsletter-button__content {19  display: inline-flex;20  align-items: center;21  gap: 10px;22  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);23}24.floating-newsletter-button__arrow {25  width: 14px;26  height: 22px;27  flex: none;28}29.floating-newsletter-button:hover,30.floating-newsletter-button:focus-visible {31  box-shadow:32    0 0 0 1px light-dark(rgba(20, 24, 30, .05), rgba(255, 255, 255, .05)),33    0 0 26px light-dark(rgba(20, 24, 30, .13), rgba(255, 255, 255, .13)),34    0 22px 34px light-dark(rgba(246, 247, 249, .32), rgba(0, 0, 0, .32));35}36.floating-newsletter-button:hover .floating-newsletter-button__content,37.floating-newsletter-button:focus-visible .floating-newsletter-button__content {38  transform: scale(1.04);39}40.floating-newsletter-button:active .floating-newsletter-button__content {41  transform: scale(1.01);42}43.floating-newsletter-button:focus-visible {44  outline: 2px solid light-dark(rgba(20, 24, 30, .85), rgba(255, 255, 255, .85));45  outline-offset: 5px;46}47@media (max-width: 420px) {48  .floating-newsletter-button {49  padding: 14px 26px;50  font-size: 15px;51}52  .floating-newsletter-button__content {53  gap: 8px;54}55  .floating-newsletter-button__arrow {56  width: 12px;57  height: 20px;58}59}60@media (prefers-reduced-motion: reduce) {61  .floating-newsletter-button,62  .floating-newsletter-button__content {63  transition-duration: .01ms;64}65}