Customize the Read More Link in Kadence Theme with Simple CSS

How to Customize the Read More Link in Kadence Theme

The Kadence theme for WordPress is highly flexible, but sometimes you want to add a bit more style to your blog layout. One simple way to improve user experience and design consistency is by customizing the Read More link that appears after post excerpts.

In this tutorial, we’ll show you exactly how to restyle the default Read More link into a clean, modern button — all with a simple CSS snippet.

Why Customize the Read More Link?

By default, the Kadence theme displays the Read More link as a simple text link. While functional, it can easily be overlooked by your visitors. Turning it into a button:

• Improves visibility
• Increases click-through rates
• Matches your website’s branding
• Enhances overall design aesthetics

The Custom CSS

Below is the custom CSS that will transform your Kadence Read More link into a button-style element:

/* Adding a button style to the read more link */
a.post-more-link {
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: capitalize;
	text-decoration: none;
	color: inherit;
	font-size: 80%;
	padding: 12px;
	border: 1px solid #4A5568;
	background: #003375;
	color: #fff !important;
	margin: 10px 0;
	border-radius: 0px;
	display: inline-block;
	text-align: center;
	transition: all 0.3s ease-in-out;
}

a.post-more-link:hover {
	color: #fff !important;
	background: #001D42;
	border: 1px solid #003375;
}

/* Remove the default Kadence arrow icon */
svg.kadence-svg-icon.kadence-arrow-right-alt-svg {
    height: 10px !important;
    width: 12px !important;
    display: none;
}

How to Apply This CSS

1. Go to your WordPress Dashboard.
2. Navigate to Appearance → Customize → Additional CSS.
3. Paste the provided CSS into the box.
4. Click Publish to save your changes.

You can also add this to a snippet plugin like FluentSnippet.

Your Read More links should now appear as stylish, clickable buttons that better fit your website’s design.

A Breakdown of What This CSS Does:

• Font styling: Adds bold weight, slight letter spacing, and capitalizes the text.
• : Makes the button larger and more touch-friendly.
• : Uses a strong blue background with white text, and a smooth color transition on hover.
• Border styling: Adds a solid border for a clear button appearance.
• Kadence icon removal: Hides the default arrow icon that Kadence adds after the Read More text for a cleaner look.

Final Result

The end result is a much more professional and user-friendly Read More button that blends seamlessly with most website designs — particularly if you’re using Kadence’s flexible design system.

Pro Tip:
You can easily customize the background color #003375 and hover color #001D42 to match your own site branding.

Author: WP Scriptly, Admin at WpScriptly

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

Recent stories by WP Scriptly:

1. Customize the Read More Link in Kadence Theme with Simple CSS - CSS-Style
2. Why Some WordPress Plugin Developers Lose Users by Ignoring Feedback - Blog
3. FluentCart – Lightweight WordPress eCommerce for Digital & Physical Products - Blog
4. Maximize Your Reach: Why Auto-Posting WordPress Plugins Are Essential for Social Media - Blog

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.