The::scroll-button()CSSpseudo-element represents a button for controlling the scrolling of ascroll container. They are generated on scroll containers when theircontent value is notnone. The direction of the scrolling is determined by the parameter value.

Syntax

::scroll-button(<scroll-button-direction>) {  /* ... */}

Parameters

<scroll-button-direction>

A value representing which direction of scroll button you want to select. The following values are available:

*

Selects all the originating element's scroll buttons, allowing styles to be applied to each of them in a single rule.

down

Selects the button that will scroll the content downward.

left

Selects the button that will scroll the content left.

right

Selects the button that will scroll the content right.

up

Selects the button that will scroll the content upward.

block-end

Selects the button that will scroll the content in the block-end direction.

block-start

Selects the button that will scroll the content in the block-start direction.

inline-end

Selects the button that will scroll the content in the inline-end direction.

inline-start

Selects the button that will scroll the content in the inline-start direction.

The specification also defines two other values —next andprev — but these are not currently supported in any browser.

Description

The::scroll-button() pseudo-elements are generated inside ascroll container only when theircontent properties are set to a value other thannone. They are generated as siblings of the scroll container's child DOM elements, immediately preceding them and any::scroll-marker-group generated on the container.

You can generate up to four scroll buttons per scroll container, which will scroll the content towards the start and end of the block and inline axes. The selector's argument specifies which scrolling direction is selected. You can also specify a value of* to target all of the::scroll-button() pseudo-elements, providing styles to all the buttons in a single rule.

The generated buttons behave just like regular<button> elements, including sharing their default browser styles. They are focusable, accessible, and can be activated like regular buttons. When a scroll button is pressed, the scroll container's content is scrolled in the specified direction by one "page," or approximately the dimension of the scroll container, similar to pressingPgUp andPgDn keys.

The recommendation is to set upCSS scroll snapping on the scroll container and set each separate item of content you want to scroll to as asnap target. This being the case, activating a scroll button will scroll the content to the snap target that is one "page" away. While the scroll buttons will work without scroll snapping, you might not get the desired effect.

When it is not possible to scroll any further in a particular scroll button's scrolling direction, the button is automatically disabled, otherwise it is enabled. You can style the scroll buttons in their enabled and disabled states using the:enabled and:disabled pseudo-classes.

Examples

SeeCreating CSS carousels for more carousel examples.

Creating scroll buttons

In this example, we demonstrate how to create scroll buttons on a CSS carousel.

HTML

We have a basic HTML<ul> list with several<li> list items.

<ul>  <li>Item 1</li>  <li>Item 2</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li>  <li>Item 6</li>  <li>Item 7</li>  <li>Item 8</li></ul>

CSS

Styling the carousel

We convert our<ul> into a carousel by setting thedisplay toflex, creating a single, non-wrapping row of<li> elements. Theoverflow-x property is set toauto, meaning if the items overflow their container on the x-axis, the content will scroll horizontally. We then convert the<ul> into ascroll-snap container, ensuring that items always snap into place when the container is scrolled with ascroll-snap-type value ofmandatory.

ul {  display: flex;  gap: 4vw;  padding-left: 0;  overflow-x: auto;  overscroll-behavior-x: contain;  scroll-snap-type: x mandatory;}

Next, we style the<li> elements, using theflex property to make them 100% of the width of the container. Thescroll-snap-align value ofstart causes the left-hand side of the left-most visible item to snap to the left edge of the container when the content is scrolled.

li {  list-style-type: none;  background-color: #eeeeee;  flex: 0 0 100%;  height: 100px;  padding-top: 20px;  scroll-snap-align: start;  text-align: center;}

Creating the scroll buttons

First, all scroll buttons are targeted with some rudimentary styles, as well as styling based on different states. It is important to set:focus styles for keyboard users. Also, as scroll buttons are automatically set todisabled when no more scrolling can occur in that direction, we use the:disabled pseudo-class to target this state.

ul::scroll-button(*) {  border: 0;  font-size: 2rem;  background: none;  color: black;  opacity: 0.7;  cursor: pointer;}ul::scroll-button(*):hover,ul::scroll-button(*):focus {  opacity: 1;}ul::scroll-button(*):active {  translate: 1px 1px;}ul::scroll-button(*):disabled {  opacity: 0.2;  cursor: unset;}

Next, an appropriate icon is set on the left and right scroll buttons via thecontent property, which is also what causes the scroll buttons to be generated:

ul::scroll-button(left) {  content: "◄";}ul::scroll-button(right) {  content: "►";}

We don't need to setalternative text for the icons on thecontent as the browser takes care of providing appropriateaccessible names automatically.

Result

Note how the scroll buttons are created at the bottom left on the carousel. Try pressing them to see how they cause the content to be scrolled.

Positioning the scroll buttons

The previous example works, but the buttons are not ideally placed. In this section, we will add some CSS to position them usinganchor positioning.

CSS

First of all, a referenceanchor-name is set on the<ul> to define it as a named anchor. Next, each scroll button has itsposition set toabsolute and itsposition-anchor property set to the list'sanchor-name, toassociate the two together.

ul {  anchor-name: --my-carousel;}ul::scroll-button(*) {  position: absolute;  position-anchor: --my-carousel;}

To actually position each scroll button, we first set analign-self value ofanchor-center on both of them, to center them vertically on the carousel:

ul::scroll-button(*) {  align-self: anchor-center;}

We then set values on theirinset properties to handle the horizontal positioning. We useanchor() functions to position the specified sides of the buttons relative to the sides of the carousel. In each case, thecalc() function is used to add some space between the button edge and the carousel edge. For example, the right-hand edge of the left scroll button is positioned 45 pixels to the right of the carousel's left-hand edge.

ul::scroll-button(left) {  right: calc(anchor(left) - 45px);}ul::scroll-button(right) {  left: calc(anchor(right) - 45px);}

Result

Specifications

Browser compatibility

See also

• scroll-marker-group
• ::scroll-marker-group
• ::scroll-marker
• ::column
• :target-current
• Creating CSS carousels
• CSS overflow module
• CSS anchor positioning module
• CSS Carousel Gallery via chrome.dev (2025)