CODEWITHSUNDEEP
htmlcss
Joseph
Joseph

Reputation: 101

Shadow overlap on adjacent buttons

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>

Upvotes: 3

Views: 321

Answers (1)

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

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>

Upvotes: 5

Related Questions