Html 制作水平按钮滚动条

我需要制作一个像这样的水平按钮滚动条，只有HTML和CSS：

浏览internet以获取解决方案后，我的代码如下所示：

.myBtnContainer{
显示：网格；
网格间距：计算值（var（--GATTING）/2）；
网格模板列：重复（6，计算（50%-var（--GALLET）*2））；
网格模板行：最小最大值（150px，1fr）；
溢出-x：滚动；
滚动捕捉点x：重复（100vh）；
滚动捕捉类型：x必填；
}
.btn{
位置：相对位置；
颜色：浅灰色；
文本转换：大写；
背景：白色；
填充：1em；
边框：0.5em实心浅灰色；
边界半径：6px；
显示：内联块；
转换：所有0.3秒到0秒；
滚动捕捉对齐：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.btn:悬停{
颜色：灰色；
边界半径：50px；
边框颜色：灰色；
转换：所有0.3秒到0秒；
}

全部展示
美国人
意大利人
亚洲的
墨西哥人
罗马尼亚语
烧烤
印度的
中国人
地中海的
甜点
冰沙
咖啡

$（文档）.ready（函数（）{
$（'.b滑块'）.owlCarousel({
循环：对，
差额：10，
导航：是的，
响应：{
0: {
项目：1
},
600: {
项目：3
},
1000: {
项目：3
}
}
})
});
.btn{
颜色：浅灰色；
文本转换：大写；
背景：红色；
填充：1em；
边框：0.5em实心浅灰色；
边界半径：6px；
显示：内联块；
转换：所有0.3秒到0秒；
滚动捕捉对齐：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
宽度：50px；
高度：50px；
}
.btn:悬停{
颜色：黑色；
边界半径：50px；
边框颜色：灰色；
转换：所有0.3秒到0秒；
}

美国人
美国人1
美国人2
我只需要使用HTML和CSS就可以了。我的课程目前不允许任何js和jquery。