Expanding Newsletter Button

1import "./styles.css";2
3import { ArrowRight } from "lucide-react";4
5export function ExpandingNewsletterButton() {6  return (7    <button type="button" className="expanding-newsletter-button">8      <span className="expanding-newsletter-button__circle" aria-hidden="true">9        <ArrowRight size={15} strokeWidth={2.5} />10      </span>11      <span className="expanding-newsletter-button__label">Newsletter</span>12    </button>13  );14}

1.expanding-newsletter-button,2.expanding-newsletter-button * {3  box-sizing: border-box;4}5.expanding-newsletter-button {6  appearance: none;7  position: relative;8  display: inline-flex;9  width: min(145px, calc(100vw - 40px));10  height: 42px;11  align-items: center;12  justify-content: center;13  overflow: hidden;14  border: 0;15  border-radius: 999px;16  background: #f97316;17  padding: 0;18  color: light-dark(#14181e,#fffaf6);19  font-family: Arial, Helvetica, sans-serif;20  cursor: pointer;21  transition: background-color .3s ease, transform .2s ease;22}23.expanding-newsletter-button__circle {24  position: absolute;25  left: 9px;26  top: 50%;27  display: grid;28  width: 24px;29  height: 24px;30  place-items: center;31  overflow: hidden;32  border-radius: 50%;33  background: light-dark(#ffffff,#141419);34  color: light-dark(#14181e,#fffaf6);35  transform: translateY(-50%);36  transition: left .42s cubic-bezier(.16, 1, .3, 1), width .42s cubic-bezier(.16, 1, .3, 1), height .42s cubic-bezier(.16, 1, .3, 1);37}38.expanding-newsletter-button__circle svg {39  transform: translateX(-26px);40  transition: transform .42s cubic-bezier(.16, 1, .3, 1);41}42.expanding-newsletter-button__label {43  white-space: nowrap;44  font-size: 15px;45  font-weight: 400;46  letter-spacing: -.45px;47  line-height: 1;48  transform: translateX(8px);49}50.expanding-newsletter-button:hover,51.expanding-newsletter-button:focus-visible {52  background: #fb7b21;53}54.expanding-newsletter-button:hover .expanding-newsletter-button__circle,55.expanding-newsletter-button:focus-visible .expanding-newsletter-button__circle {56  left: 4px;57  width: 34px;58  height: 34px;59}60.expanding-newsletter-button:hover .expanding-newsletter-button__circle svg,61.expanding-newsletter-button:focus-visible .expanding-newsletter-button__circle svg {62  transform: translateX(0);63}64.expanding-newsletter-button:active {65  transform: scale(.98);66}67.expanding-newsletter-button:focus-visible {68  outline: 2px solid light-dark(#14181e,#fffaf6);69  outline-offset: 4px;70}71@media (prefers-reduced-motion: reduce) {72  .expanding-newsletter-button,73  .expanding-newsletter-button__circle,74  .expanding-newsletter-button__circle svg {75  transition: none;76}77}