Remove drop-shadow from left side only

Question

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:

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>

Use negative values for your `:after`'s box-shadow spread value. Or use a `div` instead of `:after`. BTW, your fiddle is too inaccurate for approximate testing. — ExcellentSP, Sep 09 '16 at 19:06
@DaniP I thought it needed to be an input to submit a form. I have now refactored it down to this. `` Thanks — BeniaminoBaggins, Sep 09 '16 at 19:17
@ExcellentSP As long as you make the arrow in the fiddle have no shadow on the left side, it'll be the solution that'll work in my code. — BeniaminoBaggins, Sep 09 '16 at 19:19
Your fiddle is nothing like the picture you provided. Did you paste the right link? — leigero, Sep 09 '16 at 19:30
@Beniamino_Baggins As long as YOU make the arrow in the fiddle have no shadow on the left side. I gave you a hint. — ExcellentSP, Sep 09 '16 at 19:32
See @leigero 's comment. Your example needs to be cleaned up so it resembles the snippet you provided. — ExcellentSP, Sep 09 '16 at 19:35
Answer provided, but in short you'll want to use the `box-shadow` with a proper border over a `drop-shadow`. — leigero, Sep 09 '16 at 20:04

score 3 · Accepted Answer · answered Sep 09 '16 at 20:07

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>

score 1 · Answer 2 · answered Sep 09 '16 at 20:10

If you haven't already used your :before for the element, you could always just hide the shadow with another pseudo element. Another option would be to offset the shadow, but that really only works well for small shadows.

An example of the first one:

#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;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  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')";
}

.bubble:before {
  display: block;
  position: absolute;
  content: '';
  right: 0;
  top: 8px;
  height: 48px;
  width: 8px;
  background: #00BFA5;
  z-index: 2;
}

<button id="go-button" type="submit" class="bubble">
  GO
</button>

leigero · Answer 3 · 2016-09-09T19:59:48.843

The box-shadow property is probably what you want to use here. The drop-shadow is for more complex objects or SVG's.

You just need to apply a better box-shadow around the :after element.

.bubble:after {
   box-sizing: border-box;    
   border: 1em solid #00BFA5;
   border-color: transparent transparent #00BFA5 #00BFA5;
   transform-origin: 0 0;
   transform: rotate(-135deg);
   display: block;
   width: 0;
   z-index: 1;
   margin-top: -15px;
   right: -250px;
   top: 50%;
   box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

Since you didn't provide a working fiddle I'll leave the tweaking of the rotation and such to you, but the general idea is that you'll want to style the box-shadow after setting up a proper border & border color.

JsFiddle

Remove drop-shadow from left side only

3 Answers3