Custom style "read more" tag

Give this CSS a try:

.read-more,
.read-more:visited {
    background: none repeat scroll 0 0 #222;
    color: #fff;
    display: table;
    margin-top: 1.5em;
    padding: 10px 20px;
}

.read-more:hover {
      background:#666;
      color:#FFF;
}

Adjust the colors as needed :)

Fantastic :)

Tks so mutch Tom

Result :

http://image.noelshack.com/fichiers/2015/04/1422020195-capture-du-2015-01-23-14-25-34.png

You would have an idea to remove the "..." (point 1) ?

And for insert "border-radius:2px;" (point 2) ?

1. You'll have to add a custom function for this - I suggest using this plugin: https://wordpress.org/plugins/code-snippets/

if ( ! function_exists( 'generate_custom_blog_excerpt_more' ) ) :
	/**
	 * Prints the read more HTML
	 */
	add_filter( 'excerpt_more', 'generate_custom_blog_excerpt_more', 100 );
	add_filter( 'the_content_more_link', 'generate_custom_blog_excerpt_more', 100 );
	function generate_custom_blog_excerpt_more( $more ) {
		$generate_settings = wp_parse_args( 
			get_option( 'generate_blog_settings', array() ), 
			generate_blog_get_defaults() 
		);
		return '<div class="read-more-button"><a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . $generate_settings['read_more'] . '</a></div>';
	}
endif;

Then your CSS can change to this:

.read-more-button {
      margin-top: 1.5em;
}

.read-more,
.read-more:visited {
    background: none repeat scroll 0 0 #222;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
}

.read-more:hover {
      background:#666;
      color:#FFF;
}

Hope this helps :)

Hi Tom,

This is great, but unlike Philippe, I would like to keep the "..."
How do I add that back into the custom functions?

Not sure how it would look to have ... before a button?

You can add it before this: <div class="read-more-button"> so it looks like: ...<div class="read-more-button">

Worked a treat Tom. Thanks :)

You're welcome :)