Shadow overlap on adjacent buttons

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>

@PSKP I don't want to add margins, I still want the buttons to be adjacent — Joseph, May 22 '20 at 11:48

score 5 · Accepted Answer · edited May 22 '20 at 16:14

5

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>

edited May 22 '20 at 16:14

vals

61,425
11
89
138

answered May 22 '20 at 11:51

Alberto Rhuertas

733
4
12

Good answer ! But you should explain that the trick is removing z-index in the base class – vals May 22 '20 at 11:56
That's exactly what I was trying to do, thank you very much Alberto. @vals - it's a surprising solution, I thought adding a higher z-index would be a necessary part of the solution. I don't know why removing it fixes the issue, but it works! – Joseph May 22 '20 at 12:01
1

@vals This is about the stacking context. When you use `position: absolute` in a pseudo-element with `z-index`. Check this post for more info: https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e/9072467 – Alberto Rhuertas May 22 '20 at 12:02
@vals Unfortunately, I just realised that although it fixes the issue in terms of display (shadows under buttons), now the buttons don't actually work - nothing happens when they're clicked :( – Joseph May 22 '20 at 12:46
1

@Joseph I don't think so. I have editted the snipet, check clicking the first button – vals May 22 '20 at 16:14
@vals I really can't figure out what's happening with mine, I suspect it's to do with my JavaScript, but I can't see how. Don't suppose you know of any issues that adding :after would cause when using event handlers in JS? – Joseph May 22 '20 at 20:15
1

I don't think that the issues are with the :after. Anyway, to be sure, you can set pointer-events: none in it. Most probably, the problem is that removing the z-index causes some other element to be in front of the buttons (and it has no background, so you don't see it – vals May 23 '20 at 09:04

Shadow overlap on adjacent buttons

1 Answers1