v135 · css / scrolling

Gallery Navigator

A horizontally-scrolling card gallery using ::scroll-button(left) and ::scroll-button(right) pseudo-elements for native scroll navigation. Adjust the button style configurator and watch the arrows update — no JavaScript needed for the navigation itself.

checking ::scroll-button…

::scroll-button(<direction>) creates interactive navigation buttons on a scroll container as CSS pseudo-elements. They automatically disable when scrolled to the edge, work with keyboard navigation, and are announced to screen readers — all without JavaScript.

Button style

Background

Text color

Size

Shape

Gallery

Generated CSS