Fix link button styling

[troxler]

Describe the bug Link buttons in the demo are using invalid HTML. Nesting buttons within links is invalid and semantically incorrect.

To Reproduce The demo is using <a href="#"><button>Button Link</button></a> for link buttons.

Expected behavior Valid HTML.

Additional context I maintain a list of CSS frameworks where Marx is listed. Using valid HTML and proper semantics is a requirement to be listed.

[troxler]

For the record: I removed Marx from the list for now. https://github.com/troxler/awesome-css-frameworks/commit/910446bbebb303a448f13c29404fda0bbbd2ce12

[heller]

Hi @troxler, what makes you say the HTML is invalid?

According to MDN,

• a <button> counts as "phrasing content" and may be placed within any element that accepts "phrasing content" [1]
• the <a> tag supports "phrasing content" as long as there's not also non-phrasing content [2]

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button [2] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content

[troxler]

The content model of the a element specification defines that "there must be no interactive content descendant". A button—among other elements—is interactive content.

[heller]

Thanks! Today I learned. I'm not the maintainer but it should be pretty easy for you to open a pull request that removes the link button example.

[devnewton]

This should do the job: https://github.com/mblode/marx/pull/64