Next Reveal Button

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

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 #f0f0f033;10  border-radius: 999px;11  background: #171717;12  color: #f0f0f0;13  padding: 0 15px;14  cursor: pointer;15  transition: background-color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 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: #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}