Gradient Underline Button

1export function GradientUnderlineButton() {2  return (3    <button type="button" className="gradient-underline-button">4      <span className="gradient-underline-button-label">HOVER ME</span>5      <span className="gradient-underline-button-line" aria-hidden="true" />6    </button>7  );8}

1.gradient-underline-button {2  appearance: none;3  position: relative;4  display: inline-flex;5  flex-direction: column;6  align-items: center;7  justify-content: center;8  overflow: hidden;9  border: 0;10  background: transparent;11  padding: 8px 24px;12  color: light-dark(#14181e,#f0f0f0);13  font-family: Arial, Helvetica, sans-serif;14  cursor: pointer;15}16.gradient-underline-button-label {17  position: relative;18  z-index: 1;19  font-size: 16px;20  font-weight: 500;21  transition: transform .5s ease;22}23.gradient-underline-button-line {24  position: absolute;25  right: auto;26  bottom: 0;27  left: 0;28  width: 0;29  height: 1px;30  background: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, .35) 30%, #f97316 50%, rgba(249, 115, 22, .35) 70%, transparent 100%);31  transition: width 1s cubic-bezier(.165, .84, .44, 1);32}33.gradient-underline-button:hover .gradient-underline-button-label,34.gradient-underline-button:focus-visible .gradient-underline-button-label {35  transform: scale(1.2);36}37.gradient-underline-button:hover .gradient-underline-button-line,38.gradient-underline-button:focus-visible .gradient-underline-button-line {39  width: 100%;40}41.gradient-underline-button:focus-visible {42  outline: 2px solid #f97316;43  outline-offset: 4px;44}