Can a <button> be styled so that it flows within text like an <a> or <span> would?

Question

I'd like to style a <button> element so that it looks and behaves like a link. In particular, I'd like the button's content to flow within paragraph text in the same way that an anchor or span element would. The basic css for making a "link-like" style, resetting the browser's defaults and adding link-ish styling, is something like this:

button.link-like { /* reset browser defaults */ border-style: none; background: transparent; padding: 0; display: inline; white-space: normal; /* link look */ color: #0000ee; text-decoration: underline; cursor: pointer; }

<!DOCTYPE html> <html> <head><title>Test button links</title></head> <body> <div style="width: 200px; outline: 1px solid red;"> This is a <a href=''>just a normal link that wraps to two lines.</a> </div> <div style="width: 200px; outline: 1px solid red;"> This is a <button class="link-like">button that should behave like a link</button>. </div> </body> </html>

However, as you can see from running the snippet above, the button's content does not flow within the paragraph, but instead breaks into its own block. It appears as though despite the display: inline, the button is retaining something of an inline-block behavior within the paragraph.

Can a button be styled such that its contents flows within a paragraph like a link?

I'm sorry if this sounds silly - but why? You can get a link to do pretty much anything you need (i.e. behave like a button) using JS - unless this is not an option. — alpharomeo
– alpharomeo, Commented Mar 26, 2020 at 16:11
@alpharomeo Maybe OP wants to keep semantics intact. If that's the case, the real button could be hidden visually, and the link-as-a-button could carry aria-hidden="true" to keep things tidy. Not ideal, though. — chriskirknielsen
– chriskirknielsen, Commented Mar 26, 2020 at 16:16

j08691 · Accepted Answer · 2020-03-26 16:09:53Z

You can try display: contents;

button.link-like { /* reset browser defaults */ border-style: none; background: transparent; padding: 0; display: contents; white-space: normal; /* link look */ color: #0000ee; text-decoration: underline; cursor: pointer; }

<div style="width: 200px; outline: 1px solid red;"> This is a <a href=''>just a normal link that wraps to two lines.</a> </div> <div style="width: 200px; outline: 1px solid red;"> This is a <button class="link-like">button that should behave like a link</button>. </div>

Just be aware of the accessibilty issues on using display: contents last-child.com/displaycontents-and-the-impact-on-accessibility
Hmm, and the underline style appears to get skipped in firefox. This may be a great way to do this in the future but looks pretty bleeding-edge right now.
The spec for display: contents drafts.csswg.org/css-display/#unbox is useful in characterizing how the core problem here relates to the "principle box" of a button element.

Collectives™ on Stack Overflow

Can a <button> be styled so that it flows within text like an <a> or <span> would?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related