Shadow overlap on adjacent buttons - html

Question

I've got some adjacent buttons, I'd like them to have box shadows, but I don't want any overlap -- I want the shadow to be under all buttons, no shadow on top of any of them. I've seen what other people have said and have been playing around with :after / :before and changing z-index values, but no luck. Here's my code, does anyone have any suggestions?
.buttonFirst {
margin: auto;
font-size: 4em;
padding-top: 10%;
color: #000;
width: 90px;
height: 90px;
position: relative;
z-index: 5;
background: #dedede;
border-radius: 2vw;
outline: 2px;
border: 2px;
border-style: none;
}
.buttonFirst:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<button class="buttonFirst" id="1"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" id="3"></button>
<button class="buttonFirst" id="4"></button>

Answer 1

Is this what you mean? I hope would be helpful.
You also can adjust your box-shadow parameters due to avoid the top part of the shadows. For example: box-shadow: -1px 13px 10px 0px rgba(0, 0, 0, 0.4);
.buttonFirst {
margin: auto;
font-size: 4em;
padding-top: 10%;
color: #000;
width: 90px;
height: 90px;
position: relative;
background: #dedede;
border-radius: 2vw;
outline: 2px;
border: 2px;
border-style: none;
}
.buttonFirst:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-radius: 2vw;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<button class="buttonFirst" id="1" onClick="alert('hit')"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" id="3"></button>
<button class="buttonFirst" id="4"></button>