Menu icon Foundation
Issues using button instead of anchor tags in contexts that it should be able to replace anchor tags

Currently there seems to be unusual appearance/styling issues that occurs when using button tag (`button`) instead of the anchor (`a`) tag in contexts that the button tag should be able to replace the use of the anchor tag,

Some of these cases include parts of components that use the anchor tag merely styled as a button.

Examples of Foundation 5 components this issue presents itself is within Modal Boxes and The off-canvas menu.

To keep this forum post short, I've provided screenshots these two components exhibiting inconsistent behavior when anchor tags are replaced with the `button` tag.

## Recommendations on solving this problem or attempts I've personally made

I would say to keep the (very sensible) default styling of the button element intact with little fuss, using :not() and the individual +mixins already within Foundation to fix the problem.

You can also use Compass's unstyled link mixin but that's not ideal because the foundation gem removed Compass as a dependency.

Screenshot  4440

Screenshot  4441

Screenshot  4442

buttonshtml 5

Currently there seems to be unusual appearance/styling issues that occurs when using button tag (`button`) instead of the anchor (`a`) tag in contexts that the button tag should be able to replace the use of the anchor tag,

Some of these cases include parts of components that use the anchor tag merely styled as a button.

Examples of Foundation 5 components this issue presents itself is within Modal Boxes and The off-canvas menu.

To keep this forum post short, I've provided screenshots these two components exhibiting inconsistent behavior when anchor tags are replaced with the `button` tag.

## Recommendations on solving this problem or attempts I've personally made

I would say to keep the (very sensible) default styling of the button element intact with little fuss, using :not() and the individual +mixins already within Foundation to fix the problem.

You can also use Compass's unstyled link mixin but that's not ideal because the foundation gem removed Compass as a dependency.

Screenshot  4440

Screenshot  4441

Screenshot  4442
Brandon Arnold almost 6 years ago

Hey Kevin,
Yeah, we talked about it and we're kinda at a loss over here ha. The BUTTON Tag is pretty exclusively meant for form elements, as a replacement for the submit input type. While A tags aren't really ideal for your above use cases either, we don't think buttons make it any more "correct". Our immediate inclination is to just leave the button tag styled as, well a button, becasue it most use cases thats what it will be.

We understand the issue you're having and see how it can be a pain on occasion, but we're a little stretched thin on resources leading up to the 5.1 push (in addition to our client work). This just doesn't feel as pressing as some of the instances we want to get out.

Your above solutions seem chill though, so if however you feel up to it a PR would be appreciated.

Karl Ward almost 6 years ago

I wish Foundation would move to the <button> element for all interaction elements that don't have/need a href attribute. The general consensus is that <a> should be used for linking to any content, while can be used to invoke non-content-loading JS.
http://css-tricks.com/use-button-element/

For example the off-canvas menu button ... Hey, its a button, not an anchor link, and it doesnt want a "#" hashtag ... Just my thoughts!

Kevin Lozandier almost 6 years ago

Thanks, Brandon, it's certainly not a 'major' issue as far as Foundation's core functionality as a badass rapid prototyping framework, but I hope it gets addressed when resources aren't stretched too thin; perhaps I'll spend some time it with a "Florian's solution" one of these days. :)

AFAIK, based on recent versions of the spec, and the seminal article about the semantic use of buttons (and other things) by Heydon Pickerings (http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/), I think the use cases of outside of forms is valid.

On another note (Karl)

Karl, I can relate to your pain when it comes to the use of the button element on things without a href attribute, Heydon Pickerings and modern HTML5 books since the last update to the specification has set me straight to always question my use of anchor tags instead of the button element for many use cases.

It is why it now irks me when an anchor tag is deliberately being used as a button,and solely styled to be a button, via a class throughout Foundation 5.

Laura Ancillotti almost 4 years ago

It's a pity if you define a custom class for your Button element, it won't work with your button size and type classes (tiny, success) because only button tag and .button class is defined coupled with them. If you want people to use anchor instead of button, I suggest you try to make custom classes + framework classes work toghether for a tag as well.

To be specific, in your css we can find:

button.success, .button.success {
background-color: #43AC6A;
border-color: #368a55;
color: #FFFFFF;
}

So why not a.success?