CODEWITHSUNDEEP
csssasszurb-foundation
AGoodDisplayName
AGoodDisplayName

Reputation: 5653

Foundation Button CSS/SASS

I'm trying to flatten the default look of Zurb Foundation using SASS/CSS. Currently I'm running into an issue with the buttons. There is a highlight at the top of the buttons (about a pixel in height) which sort of gives the button a standard button look. I want to get rid of this highlight. I am using SASS too manage the CSS, but I can't even figure out where that highlight is coming from.

See the button highlight here: http://foundation.zurb.com/docs/components/buttons.html

I've tried using the developer tools to track it down in IE and Chrome, but just can't seem to figure it out. Anyone know how to get rid of the highlight at the top of the button?

Upvotes: 0

Views: 442

Answers (3)

burnedikt
burnedikt

Reputation: 1007

Just remove the box-shadow on the top edge and the highlight is gone.

In SASS/COMPASS: @include box-shadow(none) should do the job. Thus the complete solution will be, adding

.button {
    @include box-shadow(none)
}

to your sass file.

Upvotes: 2

Dawood Awan
Dawood Awan

Reputation: 7318

Add to you CSS file:

.button {
    box-shadow: none;
}

Upvotes: 0

jsalonen
jsalonen

Reputation: 30481

It comes from box-shadow. Apply the following:

.button {
    box-shadow: none;
}

Upvotes: 0

Related Questions