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 π