Five Buttons with Overlapping text - html

Question

I'm building the following (see image). Basically, I need 5 buttons with overlapping buttons (each with numbers) on the top. However, I'm unsure how to go about this?

Answer 1

One solution:
https://jsfiddle.net/ryd5e51n/
<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;
}

Answer 2

You can do this with a single element:
HTML:
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
CSS:
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%);
}
See fiddle: https://jsfiddle.net/jj2nk5f1/2/

Answer 3

Here it is.
.button {
float: left;
margin-left: 10px;
}
.number {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: black;
margin-left: 15px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid black;
margin-top: -10px;
}
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>