How to make <!--more--> a button?

Question

There is plenty of information on how to make the Read More function display different text in the Codex but what kind of filter would need to be used to make it display <button class="readmorebtn" onclick(permalink)>Read More</button>?

Answer 1

The "(more...)" link gets filtered through the_content_more_link in get_the_content(). You can hook into this function and let it return whatever you want.

add_filter('the_content_more_link', 'more_button');
function more_button($more_link) {
    return '<button class="readmorebtn" onclick="' .
        esc_attr('window.location="' . get_permalink() . '"') .
        '">Read more</button>';
}

Answer 2

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="readon-wrap1">
    <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>
        </span>
    </a>
</div>

You can see the regular read more link buried in the middle. The various <div>s and <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:

1. Your site will not validate
2. 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).
3. 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.