Change Read More Link Into a Button

This code enables you to make the read more link into a button.

Here’s the result:

And here’s the code which you can add to your child themes functions file. The code assumes you’re using the Genesis > Content Archives > Content Limit setting.

The PHP code replaces the read more class with the button class and uses your themes existing CSS to style the button.

If you’re using the setting to display excerpts or not using Genesis, use this code instead which works when displaying the excerpts in any theme:

Most StudioPress themes already include CSS for styling buttons.

Sample Button CSS

If your theme doesn’t include CSS for buttons, you can use the following in your style.css file and change the colors to match your theme.

.button {
    background: none repeat scroll 0 0 #ff8a00;
    box-shadow: 0 2px 0 #d73200;
    float: left;
    font-weight: 700;
}

.button:hover {
    background: none repeat scroll 0 0 #ff9b2f;
}

To style your button further, you can add another class to the PHP code like this:

And use CSS to style your read more buttons only without effecting the styling of other buttons:

a.read-more {
    display: block;
	text-align: center;
}

The above CSS will center the button.