Skip to content

Instantly share code, notes, and snippets.

@its-monotype

its-monotype/scroll-down-button.html

Created March 13, 2026 13:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save its-monotype/4db84433484410a3a4e0cd409165fcf5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save its-monotype/4db84433484410a3a4e0cd409165fcf5 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll down button
Raw
scroll-down-button.html
<button className="relative flex size-9 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-white/20 bg-white/80 shadow-md backdrop-blur-md transition-all duration-200 hover:bg-white hover:shadow-lg">
<div className="pointer-events-none absolute inset-0 bg-radial-[circle] from-violet-500 to-transparent opacity-0 blur-md transition-opacity duration-300 data-[state=open]:opacity-80"></div>
<div className="relative z-10 mix-blend-luminosity">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 3a.5.5 0 0 1 .5.5v11.793l4.146-4.147a.5.5 0 0 1 .708.708l-5 5a.5.5 0 0 1-.708 0l-5-5a.5.5 0 0 1 .708-.708L9.5 15.293V3.5A.5.5 0 0 1 10 3Z" />
</svg>
</div>
</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment