Next Reveal Button

1import "./next-reveal-button.css";2
3import { ArrowRight } from "lucide-react";4
5export function NextRevealButton() {6  return (7    <button type="button" className="next-reveal">8      <span className="next-reveal-label">Next</span>9      <ArrowRight className="next-reveal-arrow" size={27} strokeWidth={1.7} />10    </button>11  );12}

1.next-reveal {2  position: relative;3  display: inline-flex;4  align-items: center;5  justify-content: flex-end;6  width: 110px;7  height: 42px;8  overflow: hidden;9  border: 1px solid light-dark(#14181e33,#f0f0f033);10  border-radius: 999px;11  background: light-dark(#ffffff,#171717);12  color: light-dark(#14181e,#f0f0f0);13  padding: 0 15px;14  cursor: pointer;15  transition: background-color .5s cubic-bezier(.4, 0, .2, 1), border-color .5s cubic-bezier(.4, 0, .2, 1), color .5s cubic-bezier(.4, 0, .2, 1);16}17.next-reveal-label {18  position: absolute;19  left: 21px;20  font-size: 16px;21  font-weight: 400;22  opacity: 0;23  transform: translateY(160%);24  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);25}26.next-reveal-arrow {27  position: relative;28  z-index: 1;29  flex: none;30}31.next-reveal:hover,32.next-reveal:focus-visible {33  border-color: transparent;34  background: #f97316;35  color: light-dark(#f0f2f5,#171d1a);36}37.next-reveal:hover .next-reveal-label,38.next-reveal:focus-visible .next-reveal-label {39  opacity: 1;40  transform: translateY(0);41}42.next-reveal:focus-visible {43  outline: 2px solid #f97316;44  outline-offset: 4px;45}