Menu icon Foundation
Button has text-shadow effect?

RESOLVED - It is my link behavior that is impacting the buttons. I will create a new specific button class that gets around this issue.

I implemented a simple default button. I have to live in the world of IE8ish compatibility mode (not sure that really matters). When I implement just the simple default button , the text is really hard to read and actually has what appears to be some sort of "shadow" within the text. But when I search for "text-shadow" in the css, I don't find anything anywhere in the foundation css that references a text-shadow being applied to a button. I've added a color background in the example below so you can more clearly see the odd shadowing.

The shadow appears to be the white font with a shadow of the hover color coming through. I don't see this occuring when I look at the Kitchen Sink buttons and when I've used Firefox or Google Developer Tools, I don't see anything different in regard to their CSS that would specifically keep this kind of thing from happening. I thought I would try removing the hover style to see if that helps - but before I start messing with this I just wanted to check to see if anyone else has ever experienced this. Most of the Kitchen Sink items just drop and work - so I'm surprised that something this simple has been such a bear to resolve. Any thoughts greatly appreciated!

Buttonquestion

default buttontext-shadowhover backgroundbutton text problem

RESOLVED - It is my link behavior that is impacting the buttons. I will create a new specific button class that gets around this issue.

I implemented a simple default button. I have to live in the world of IE8ish compatibility mode (not sure that really matters). When I implement just the simple default button , the text is really hard to read and actually has what appears to be some sort of "shadow" within the text. But when I search for "text-shadow" in the css, I don't find anything anywhere in the foundation css that references a text-shadow being applied to a button. I've added a color background in the example below so you can more clearly see the odd shadowing.

The shadow appears to be the white font with a shadow of the hover color coming through. I don't see this occuring when I look at the Kitchen Sink buttons and when I've used Firefox or Google Developer Tools, I don't see anything different in regard to their CSS that would specifically keep this kind of thing from happening. I thought I would try removing the hover style to see if that helps - but before I start messing with this I just wanted to check to see if anyone else has ever experienced this. Most of the Kitchen Sink items just drop and work - so I'm surprised that something this simple has been such a bear to resolve. Any thoughts greatly appreciated!

Buttonquestion

This post has been closed. No new replies can be added.

Rafi Benkual almost 4 years ago

Glad you got it!