Short answer: You don't.
Longer, more useful answer: What you need to do is hook in to the
the_content_more_link filter and change the simple link into a style-able element that looks like a button. The theme I use on my site already does this. It turns my read more link into:
<div class="readon1-l png"></div>
<a href="http://mindsharestrategy.com/why-i-run/" class="readon-main">
<span class="readon1-m png">
<span class="readon1-r png">More</span>
You can see the regular read more link buried in the middle. The various
<span>s around it help to style the link so that it appears as a solid gray button:
So if you want to style your link to look like a button, this is the path to take. As @sorich87 stated in the comments, the
<button> tag is meant to be used inside forms. So if you use a
<button> tag for your read more link, you'll face the following issues:
- Your site will not validate
- Your site's layout can confuse screen readers and certain parsing engines (as they'll see the
<button> and either strip out the link or thrown an error while looking for the rest of the form).
- You might run into conflicts if you ever accidentally nest the
<!--more--> tag inside the body of a form. You can say "I won't do that" now, but accidents are accidents and it might still happen ... then weirdness and chaos will ensue.