How to make the <!--nextpage--> show as a button?

Question

So currently my blog post has a "Pages: Next page" at the bottom of my blog post by putting <!--nextpage-a-> in the editor where I wanted to stop the first page. Also with the <?php wp_link_pages( array ( 'next_or_number' => 'next' ) ); ?> in the single.php file.

Now if I wanted to make the "Pages: Next Page" a button with "Next Page" instead, what should I do to achieve this? I'm not super familiar with Wordpress codex and I could only come up with the wacky solution like putting an image file that looks like the button that links to the next page but I would like to make it an actual button instead. It doesn't even need to have the previous page button.

Answer 1

Try doing something like wp_link_pages( array('before'=>'<button>', 'after'=>'</button>') ); It should work!

Answer 2

You can also just use CSS to style the link like a button. You'd need to know which identifier your theme is using with that link element to target it properly.

Here is an example from my blog:

#posts-nav a {
   background: #bbf;
   border-radius: 6px;
   padding: 6px;
   border: solid 1pt #99d;
}

You probably will also want to style the hover state, as well.