Is there a way to create a horizontal button scrollbar using only HTML and CSS? I want it to look like this: https://i.stack.imgur.com/RWFRt.png
After searching online for a solution, I came up with the following code:
.myBtnContainer{
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: repeat(6, calc(50% - var(--gutter) * 2));
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-points-x: repeat(100vh);
scroll-snap-type: x mandatory;
}
.btn{
position:relative;
color: lightgrey;
text-transform: uppercase;
background: white;
padding: 1em;
border: 0.5em solid lightgrey;
border-radius: 6px;
display:inline-block;
transition: all 0.3s ease 0s;
scroll-snap-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn:hover{
color: grey;
border-radius: 50px;
border-color: grey;
transition: all 0.3s ease 0s;
}<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> American</button>
<button class="btn" onclick="filterSelection('cars')"> Italian</button>
<button class="btn" onclick="filterSelection('people')"> Asian</button>
<button class="btn" onclick="filterSelection('people')"> Mexican</button>
<button class="btn" onclick="filterSelection('people')"> Romanian</button>
<button class="btn" onclick="filterSelection('people')"> Barbeque</button>
<button class="btn" onclick="filterSelection('people')"> Indian</button>
<button class="btn" onclick="filterSelection('people')"> Chinese</button>
<button class="btn" onclick="filterSelection('people')"> Mediterranean</button>
<button class="btn" onclick="filterSelection('people')">Desserts</button>
<button class="btn" onclick="filterSelection('people')"> Smoothies</button>
<button class="btn" onclick="filterSelection('people')"> Coffee</button>
</div>I placed the myBtnContainer in body. I read that this might be causing the issue with scroll-snap-type: x mandatory;, but I'm not sure how to fix it. Since I am a beginner, any guidance would be greatly appreciated.