Five Buttons with Overlapping text

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>