# Create Buttons for Horizontal Scrolling
Tutorial3 minPublished on Mar 20, 2023Updated on Table of contents
[
Copied](#)[
](#)[
](#)[
](#)
- [H2 Example](#)
Use AI to summarize this article[
ChatGPT](#)[
Claude](#)[
Grok](#)[
Perplexity](#)[
Google AI](#)Key pointsIn today's tutorial, we will demonstrate how, using Webflow and a small piece of code, we can add buttons to our project that enable horizontal scrolling.
## Step 1: Overflow Auto
For this tutorial to work, it is essential that one of the elements on your page has an overflow set to auto, allowing for basic horizontal scrolling.
## Step 2: Create 2 Buttons (or Link Blocks)
In your section, you will need to insert two buttons (or link blocks). The first will allow scrolling to the left, and the second will allow scrolling to the right.
You can customize them as you wish.
We recommend adding a custom attribute [aria-label](/blog/aria-label) to describe the buttons for the sake of web accessibility.
## Step 3: Add IDs to the Buttons
For your left button (which scrolls to the left), you can add the following ID: slideLeft
For your right button (which scrolls to the right), you can add the following ID: slideRight
## Step 4: Add an ID to Your Horizontally Scrollable Element
It is necessary to add an ID to the element that has overflow set to auto. You can give it any ID you desire.
## Step 5: Insert Code into Your Page
You will now go to your page settings. In the "Before body Tag" section, simply copy and paste the following code (make sure to replace ID-element-scrollable with the ID you defined in step 4):
`
`You can manage the "length" of the scroll by modifying the values of 500, and you can control the duration of the animation by changing the values of 1000.
If you wish, you can also hide the scrollbar by adding the following code (make sure to replace class-name-scrollable-element with the name of the class you assigned to your horizontally scrollable element):
`
`
## Step 6: Publish Your Project to See the Results
The JavaScript code only works when the site is live. Therefore, you will need to publish your project to use this feature.
And there you go, your new buttons now allow for horizontal scrolling (to the right or left) in your element.
Discover how to create a [progress bar in Webflow](/blog/how-to-create-scroll-progress-bar-webflow-tutorial)!
[
](#).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[
](/team/thibaut-legrand)[
](https://www.linkedin.com/in/thibaut-legrand-digidop/)[
](https://twitter.com/lgd_thibaut)+1200 readers
## Stay ahead of the curve!
Subscribe now for expert insights.
[Subscribe
](https://digidop.substack.com/subscribe)[Preview Newsletter
](https://digidop.substack.com/)
## Suggested articles
DocumentationAll blog post
### Top 20 Web & Digital Agencies for B2B SaaS in 2026
[Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026.webp)NewsDevelopmentAll blog post
### Webflow launches Source. Our take on this shift.
[Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.DocumentationAIAll blog post
### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers
[Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles
](/blog)Every great website
starts with a conversation[Talk to an expert
](/contact)[Book a call
](/calendly)