Layered Gradient Button

1export function LayeredGradientButton() {2  return <button type="button" className="layered-gradient-button"><span>View all projects</span><span className="layered-gradient-button-surface" aria-hidden="true" /><span className="layered-gradient-button-haze" aria-hidden="true" /></button>;3}

1.layered-gradient-button {2  position: relative;3  display: inline-flex;4  align-items: center;5  justify-content: center;6  border: 0;7  border-radius: 999px;8  background: transparent;9  padding: 16px 24px;10  cursor: pointer;11}12.layered-gradient-button > span:first-child {13  position: relative;14  z-index: 2;15  background: linear-gradient(to right, light-dark(#14181e,#f0f0f0), light-dark(#7c8695,#464646) 48%, light-dark(#14181e,#f0f0f0));16  background-clip: text;17  color: transparent;18  font-size: 18px;19  font-weight: 500;20  transition: transform .3s ease;21}22.layered-gradient-button-surface {23  position: absolute;24  z-index: 1;25  inset: 0;26  border: 1px solid light-dark(#14181e33,#f0f0f033);27  border-radius: inherit;28  background: radial-gradient(circle at 50% 100%, light-dark(#ffffff,#111), light-dark(#e9ecf1,#252525));29  transition: transform .3s ease;30}31.layered-gradient-button-haze {32  position: absolute;33  z-index: 0;34  top: 4px;35  width: 104%;36  height: 98%;37  border-radius: inherit;38  background: light-dark(#14181e80,#f0f0f080);39  opacity: 0;40  transform: scale(.8);41  transition: opacity .6s ease, transform .3s ease;42}43.layered-gradient-button:hover > span:first-child, .layered-gradient-button:focus-visible > span:first-child {44  transform: scale(1.05);45}46.layered-gradient-button:hover .layered-gradient-button-surface, .layered-gradient-button:focus-visible .layered-gradient-button-surface {47  transform: scale(1.05);48}49.layered-gradient-button:hover .layered-gradient-button-haze, .layered-gradient-button:focus-visible .layered-gradient-button-haze {50  opacity: 1;51  transform: translateY(1px) scale(.98);52}53.layered-gradient-button:focus-visible {54  outline: 2px solid #f97316;55  outline-offset: 4px;56}