Search code examples
htmlcssdropshadowbox-shadow

Remove drop-shadow from left side only

I have this button that has an :after to create an arrow. I'm giving the button a box-shadow, and giving the :after a drop shadow to make the :after look like it is part of the button. However there is a tiny bit of shadow running down the left edge of the :after which makes it look disconnected from the button. See image:

enter image description here

Is there any way to get rid of the shadow running down the left edge?

The arrow is off the button below it for some reason but it doesn't matter, just try to stop the arrow's shadow running down the left edge.

Here is the code:

#go-button {
  position:relative;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 80%;
  background-color: #00BFA5;
  padding: 12px;
  border: 0px solid #Fc4747;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  z-index: 100;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  right: -24px;
  top: 50%;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; }
<button id="go-button" type="submit" class="bubble">
  GO
</button>

Solution

  • You actually do want to use drop-shadow, since this is a "complex object". Move it to the parent element; you'll find the that drop-shadow is properly applied to the after pseudo-element:

    #go-button {
  position:relative;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 80%;
  background-color: #00BFA5;
  padding: 12px;
  border: 0px solid #Fc4747;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  right: -24px;
  top: 50%;
}
    <button id="go-button" type="submit" class="bubble">
  GO
</button>