I am currently using Genesis for most of my sites. This framework has powerful options and well-written code so that I don’t have to worry about Theme and coding anymore. Despite the power of Genesis, it’s too plan and hard to decorate your theme, especially for those who aren’t familiar with coding and framework.
The most annoying thing is probably the readmore feature. It’s nothing but an ellipsis (…). As a result, it’s hard for users to view the full post. Of course they can click on the title to visit the link. It’s easy for us, who surf the internet everyday. How about new users? Maybe they don’t know the solution, so they’ll simply click the back button and leave your site.
It’s better to make your readmore button more visible and attractive so that people can click on and read your content. In this post, I’ll show you how to make your own readmore button and style it up your way.
1. Change the default … into Readmore link
Open Functions.php in your child theme then add the following codes
add_filter( 'excerpt_more', 'add_excerpt_more' );
function add_excerpt_more( $more ) {
return '...<a href="' . get_permalink() . '" rel="nofollow">Readmore</a>';
}
This will change the default “…” into “Readmore” and link it to the post.
2. Add some CSS
The next step is to decorate the Readmore link into a button by adding some CSS codes to style.css file. You can use the code below or do as your wish.
.home .entry-content a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: 0 0 #F1F1F1;
color: #716E6E;
padding: 3px 5px 5px;
text-decoration: none;}
.home .entry-content a:hover {
background: #000;
color: #fff;
}
And here is the result. 
When hover your mouse on that link
Too easy, right? After implementing this easy tip, my bounce rate has decreased and I have seen an increase in pageviews. I hope that you can use this to your blog and see your result soon.
Just one idea, too complex to do this, I have one way to do this more simple.
Can you share your idea with us
I am willing to hear
I was searching for this very thing – a killer “read more” button. I’ve tried it and it works, I just have to edit the CSS to how I want it to be, but for some reason its showing up twice. Any idea what’s doing this?
Thank you very much for sharing.
Terence.
I assume that it’s because your child theme has set a custom keyword for continuing reading. You can remove the following code in your child theme functions.php to solve the problem
add_filter( ‘excerpt_more’, ‘add_excerpt_more’ );
function add_excerpt_more( $more ) {
return ‘…Readmore‘;
}
This is what I really want. Thanks.
Great that was just what I needed. I chose one of the blankest child themes I could find, as that is just what I wanted, but I didn’t realise that a lot of these options were not standard which is making tweaking it more difficult, but that’s half the fun!
Do you know how we can include more lines of text before the ‘read more option’?
many thanks
Just realised whilst reading this blog, that you haven’t added this to your own theme??
I have just changed into a new theme, and this theme looks not so good with that button. So I decided to keep the old “readmore” link
Thank you, i have been using plugins to create css style link buttons but this is really simple and works great with a bit of color tweaking, thanks again