UPDATE: The solution provided by @Dinesh karthik works well, but unfortunately it does not support IE11. I am trying to make it compatible with IE11 as well.
Is there a way to make a button look like an anchor tag within a paragraph?
I want the button to be able to have a line break and behave similarly to 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 link: https://codepen.io/zecka/pen/dyObwMm