Button disable inset shadow

[LeviSchuck]

Unlike the inputs, there's no way to globally say for buttons "Don't give me an inset box shadow!"

My workaround for this is along the lines of the following:

For foundation/scss/foundation/components/_buttons.scss, I added

$button-box-shadow: true !default; near line 33.

Then, around line 204, which starts out normall like

  @media only screen {

    button, .button {
      @include inset-shadow();

I replaced @include inset-shadow(); with

      @if $button-box-shadow != false {
        @include inset-shadow();
      }

This allows me to have the dead simple flat look I'm going for, without using mixins.

I am not familiar enough with sass to consider this a decent solution, but for me, it works.

[dmackerman]

Instead of hacking the core of Foundation, I would suggest just overriding the .button class with box-shadow: none;, or just writing your own mixin.

I agree that this should be a part of the framework though.

[LeviSchuck]

I agree that changes to foundation should be minimal and hopefully none. (Which is why I try to leave the behavior the same as the default with my option not present)

When it comes to sass, I don't know if it optimizes out duplicate rules with overriding attributes, but I would naively expect it to have both rules. To me, that's just more stuff going down the wire.

[oytuntez]

Sorry for posting on a closed issue. But this could be a reference to all who comes here after a search.

You can use these variables to set shadows of a button:

$shiny-edge-size: 0 1px 0;
$shiny-edge-color: rgba(#fff, .5);
$shiny-edge-active-color: rgba(#000, .2);