Html 具有重叠文本的五个按钮

我正在构建以下内容（见图）。基本上，我需要5个按钮，上面有重叠的按钮（每个按钮都有数字）。然而，我不知道该怎么做

在这里

。按钮{
浮动：左；
左边距：10px；
}
.号码{
宽度：20px；
高度：20px；
边界半径：10px；
背景色：黑色；
左边距：15px；
}
.街区{
宽度：50px；
高度：50px；
边框：1px纯黑；
利润上限：-10px；
}

一种解决方案：

---

可以使用单个元素执行此操作：

HTML:

---

参见小提琴：

emmm。。你想让别人演示如何将这些按钮与数字重叠吗？这不一定是全部内容，但我想看看如何将文本与按钮重叠。我只是在示例中添加了垂直和水平居中的数字。太棒了，但我如何让其中5个按钮彼此相邻？谢谢你的帮助。真的很感激。浪费标记。。。为什么没有计数器重置和psuedo元素？@AhmadAlfy-在某些情况下，为了使用JavaScript访问它们，您可能希望将它们作为单独的元素（有或没有类名）。@AhmadAlfy我不喜欢大型项目中的伪元素，这真的让人困惑

<div class="button">
    <div class="button-top"><span class="text">1</span></div>
    <div class="button-bottom"></div>
</div>

.button
{
    display: table;
}

.button-top
{
    background-color: black;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    margin: auto;
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 2px 2px #bbbbbb;
    color: white;
    text-align: center;
}

.text
{
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

.button-bottom
{
    background-color: #efefef;
    width: 100px;
    height: 90px;
    margin-top: -15px;
    position: relative;
    z-index: 1;
    border: 2px solid #bbbbbb;
    border-radius: 20px;
}

<div class="button">

</div>

<div class="button">

</div>

<div class="button">

</div>

<div class="button">

</div>

<div class="button">

</div>

div.button {
    display:block;
    float:left;
    margin:18px 5px 0;
    position:relative;
    overflow:visible;
    background:none #efefef;
    width:100px;
    height:100px;
    border:2px solid #ccc;
    border-radius:10px;
    counter-increment: button;
}

div.button:before {
    content:counter(button);
    display:block;
    padding:8px 14px;
    background:none #000;
    border:2px solid #ccc;
    border-radius:100px;
    color:#fff;
    position:absolute;
    left:50%;
    top:-18px;
     transform: translateX(-50%);
}