Next Dot Fill Button

1import "./styles.css";2
3import { ArrowRight } from "lucide-react";4
5export function NextDotFillButton() {6  return (7    <button type="button" className="next-dot-fill-button">8      <span className="next-dot-fill-button__fill" aria-hidden="true" />9      <span className="next-dot-fill-button__label">Next</span>10      <span className="next-dot-fill-button__reveal" aria-hidden="true">11        Next12        <ArrowRight size={19} strokeWidth={2.4} />13      </span>14    </button>15  );16}

1.next-dot-fill-button,2.next-dot-fill-button * {3  box-sizing: border-box;4}5.next-dot-fill-button {6  appearance: none;7  position: relative;8  display: inline-flex;9  width: min(132px, calc(100vw - 40px));10  height: 50px;11  align-items: center;12  justify-content: center;13  overflow: hidden;14  border: 1px solid #d7dbe2;15  border-radius: 999px;16  background: #fff;17  padding: 0;18  color: #0a0a0a;19  font-family: Arial, Helvetica, sans-serif;20  font-size: 16px;21  font-weight: 500;22  letter-spacing: -.02em;23  line-height: 1;24  cursor: pointer;25}26.next-dot-fill-button__fill {27  position: absolute;28  left: 26px;29  top: calc(50% - 4.5px);30  z-index: 1;31  width: 9px;32  height: 9px;33  border-radius: 50%;34  background: #0a0a0a;35  transition: transform .5s cubic-bezier(.16, 1, .3, 1);36}37.next-dot-fill-button__label {38  position: relative;39  z-index: 0;40  transform: translateX(5px);41  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;42}43.next-dot-fill-button__reveal {44  position: absolute;45  inset: 0;46  z-index: 2;47  display: inline-flex;48  align-items: center;49  justify-content: center;50  gap: 8px;51  color: #fafafa;52  transform: translateX(46px);53  opacity: 0;54  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;55}56.next-dot-fill-button__reveal svg {57  flex-shrink: 0;58}59.next-dot-fill-button:hover .next-dot-fill-button__fill,60.next-dot-fill-button:focus-visible .next-dot-fill-button__fill {61  transform: scale(28);62}63.next-dot-fill-button:hover .next-dot-fill-button__label,64.next-dot-fill-button:focus-visible .next-dot-fill-button__label {65  transform: translateX(46px);66  opacity: 0;67}68.next-dot-fill-button:hover .next-dot-fill-button__reveal,69.next-dot-fill-button:focus-visible .next-dot-fill-button__reveal {70  transform: translateX(0);71  opacity: 1;72}73.next-dot-fill-button:focus-visible {74  outline: 2px solid #f97316;75  outline-offset: 4px;76}77@media (prefers-reduced-motion: reduce) {78  .next-dot-fill-button__fill,79  .next-dot-fill-button__label,80  .next-dot-fill-button__reveal {81  transition: none;82}83}