CODEWITHSUNDEEP
htmlcss
ZecKa
ZecKa

Reputation: 2934

CSS Button Multiline in paragraph like an anchor tag (IE11 also)

EDIT: @Dinesh karthik solution work well but sadly not on IE11. I try to make it work also in IE11

How to display a button like an anchor tag in a paragraphe.

I mean allow a button to have a line break and have the same behaviour than an anchor tag

button{
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: inherit;
    white-space: normal;
}
.demo{
  width: 150px;
  background: #ccc;
}

a, button{
  text-decoration: underline;
}
<h3>With a button</h3>
<p class="demo">
Hello world <button>find more information here</button> and keep calm
</p>

<h3>With an anchor</h3>
<p class="demo">
Hello world <a>find more information here</a> and keep calm
</p>

Codepen: https://codepen.io/zecka/pen/dyObwMm

Upvotes: 0

Views: 85

Answers (2)

Ben Gubler
Ben Gubler

Reputation: 1441

display: contents has accessibility issues (buttons won't focus correctly). There is no other way (currently) to accomplish what you're asking, since buttons cannot be inline.

I recommend just using <div> elements with role="button". See https://benfrain.com/converting-divs-into-accessible-pseudo-buttons/ for an example of how to do this.

Upvotes: 0

Dinesh s
Dinesh s

Reputation: 377

change display css in button from display:inherit to display:contents

button{
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: contents;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: inherit;
    white-space: normal;
}
.demo{
  width: 150px;
  background: #ccc;
}

a, button{
  text-decoration: underline;
}
<h3>With a button</h3>
<p class="demo">
Hello world <button>find more information here</button> and keep calm
</p>

<h3>With an anchor</h3>
<p class="demo">
Hello world <a>find more information here</a> and keep calm
</p>

Upvotes: 1

Related Questions