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, #f0f0f0, #464646 48%, #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 #f0f0f033;27  border-radius: inherit;28  background: radial-gradient(circle at 50% 100%, #111, #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: #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}