How to Customize Read More Button in the GeneratePress Theme

Are you searching for how to customize the Read More button in your WordPress website built with the GeneratePress theme?

In this tutorial, I will help you create beautiful Read More buttons for your WordPress website with the help of CSS code. You can apply this code to your WordPress website built with the GeneratePress theme or other themes.

So, now let’s start this.

Why Use Read More Button on Your Website?

Most bloggers use the Read More button on their website. But some of them avoid using it on their websites.

It’s your personal choice whether you want to use the Read More button or not, but I suggest you use it on your website.

You can understand the importance of the Read More button by reading the following points.

• Read More buttons attract site users to click on the buttons.
• It increases the Click-through rate (CTR) on your website.
• These buttons compress the content on the home and blog pages. In this way, you can add more content in less space.
• Read More buttons help you to increase your page loading on your website.

If you’re using full text on each blog post instead of a summary or excerpt, then your blog’s Click-through rate will decrease.

Read More buttons encourage site users to click through and view your blog posts. It directly affects your site’s bounce rate and user stay time.

Customize Read More Button in the GeneratePress Theme

So, now let me start to show you how to customize the Read More button on your WordPress website built with the GeneratePress theme.

I will use some CSS code to create and customize beautiful Read More buttons on your WordPress website.

First, you need to log in to your WordPress website dashboard. Now go to the Settings – Reading – For each post in a feed, include and tick on Excerpt.

Now click on the Save Changes button to apply the changes.

I’m using the GeneratePress Premium theme on my websites to access more features. To enable the Blog module in GP Premium, go to Appearance – GeneratePress and Activate the Blog module.

Now go to Appearance – Customize – Layout – Blog, and in the Archives section, select Content type as Excerpt.

Next, choose Excerpt word count as 25 words and name your Read more label as Continue Reading or Read More, whatever you want.

After that, tick the box Display read more as button.

Finally, hit the Publish button.

To apply the custom button background, hover, and text color, go to Appearance – Customize – Color – Buttons and choose the color you want.

Style the Read More Button Using CSS

Various types of buttons attract site users to click on the button. That’s why bloggers want to have some unique and clean style buttons on their websites.

I will show you some CSS code that will make the Read More buttons on your website unique and attractive.

To apply CSS code to your website, go to Appearance – Customize and click on the Additional CSS tab.

Copy and paste the following code.

/* Read More button Style by WPSettingbox */

a.read-more.button {
	background-image: linear-gradient(to right, #008060 0%, #00a9d3 51%, #009ac9 100%);
}

a.read-more.button {
	font-size: 13px;
	padding: 8px 25px;
	text-align: center;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: rgba(0,0,0,.14) 0 2px 6px 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	border-radius: 120px;
}

a.read-more.button:hover {
	background-position: right center;
	transform: translateY(0);
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
	/* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}

Now click on Publish button to apply the changes.

The above code will change the entire button style, background color, and button hover color.

If you want to float the Read More button on the right side of the blog, then also use the below code.

/* Float Read More button on the right side */

a.read-more.button {
    float: right;
}

The above button style is my favorite as it is clean and attractive.

Now let’s try some other style of the Read More button for your WordPress website.

/* Read More button Style by WPSettingbox */

a.read-more.button {
    border-radius: 4px;
	  padding: 6px 12px;
	  font-size: 14px;
	  display: inline-block;
	  background-color: #ffffff;
	  color: #ff4500;
	  border: 2px solid #ff4500;
}

a.read-more.button:hover {
	  background-color: #ff4500;
	  color: #ffffff;
	  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
	  transition: 0.5s;
}

The above code will create the border style Read More button on your WordPress website.

Conclusion

I hope you can now customize the Read More button on your WordPress website built with the GeneratePress theme using the above code.

Plus, you can style the Read More buttons that best suit the color combination of your website.

Also, learn how to make the last sidebar widget sticky and featured sidebar widget on your WordPress website.

Let me know after using this CSS code. If you encounter any problems with this tutorial, send me a message below.

If you liked this article, please show your love by sharing it on your favorite social media channel and also send your thoughts in the comment section.

I love your comments. It makes me more precise to give you the best WordPress resources and guides.

You can follow WPSettingbox on Twitter and Facebook to get fresh and updated content.