Navigation Previous next // Button Style

Hi there,

1. Let's try solve #2 first then I'll provide some CSS.

2. Can you try this PHP snippet here?
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-737583

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know :)

It works fine. Thanks.

Now you can add some CSS to make it a button style:

span.next, span.prev {
    background-color: #000;
    padding: 15px 10px;
}

What do i need to do to apply the theme style to the button (e.g. post comment button or read more button)?

Thank you.

Can you modify the PHP snippet to this:

add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
  	if ( ! $post ) {
	  return '';
	}
  
	return sprintf(
		'<div class="nav-next"><span class="next button"><a href="%1$s" title="%2$s">Next</a></span></div>',
	  	get_permalink( $post ),
	  	$post->post_title
	);
}, 10, 4 );

add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
  	if ( ! $post ) {
	  return '';
	}
  
	return sprintf(
		'<div class="nav-previous"><span class="prev button"><a href="%1$s" title="%2$s">Previous</a></span></div>',
	  	get_permalink( $post ),
	  	$post->post_title
	);
}, 10, 4 );

Then remove the CSS I provided above?

Let me know :)

Hello Leo. Rmoving the css stuff gave it a pure text style approach. So I decided not to remove the css you provided. This comes close to what I want. Only outstanding issue for now is I need to change the color of the text wihtin the button into white.

>>> SORRY I RE-OPENDED THE TOPIC <<<

Hi there,

this CSS to change the next / prev text color:

span.next,
span.prev,
span.next a,
span.prev a {
    color: #fff;
}

Hi David. Many thanks.

I am sorry but it there is another question poppin' up (hopefully the last one :) )
How do I define the color setting for mouse hover?

Cheers

Like so:

span.next:hover,
span.prev:hover,
span.next:hover a,
span.prev:hover a {
    color: #fff;
}

Great. Now another question. The hoover color for the button itself. Your advice is really appreciated.

Try this:

span.next:hover, span.prev:hover {
    background-color: #000;
}

Thanks David.

You're welcome