Kadence - Customizing the Read More button

This tutorial is considered intermediate and involves light code editing.

In Kadence, the "Read More" button is actually not a button, but a link. This means that it will not automatically inherit the Button Settings you've set in the Customizer.

Your theme contains code to add a background color from your Global Palette, as well as inherit the font you've set for your navigation menu (in our themes, the button font always matches the navigation font). For most sites, this setup will work just fine! Your Read More buttons should display cohesively with the rest of your site and there's nothing more you need to do. 🙂

But if you'd like to be able to fine-tune the Read More button, we'll go over how in this tutorial!

Modifying the Read More button

Below are some code snippets that you can use to modify the appearance of the Read More button.

Change the text color and background color of the Read More button:

a.post-more-link {
    background: #000000 !important;
    color: #ffffff !important;
}

Change the text and background color on HOVER:

a.post-more-link:hover {
    background: #cccccc !important;
    color: #000000 !important;
}

Change the font, font size, and letter spacing of the Read More button:

a.post-more-link {
    font-family: 'Your Font Name', sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

Note: Whatever font you add here, you'll need to make sure it is being loaded on your site elsewhere first. For example, you could set your Buttons font to DM Sans, and then add DM Sans to replace Your Font Name in the code.

Change the size of the Read More button:

a.post-more-link {
    padding: 12px 24px !important;
}

Padding is the amount of space around the link. The first number is the top and bottom padding, the second number is the left and right padding. 

Where to add code snippets + some tips

• Code snippets can be pasted at Appearance > Customize > Additional CSS.
• Anywhere you see !important, it's intentional – leave it there.
• All values (colors, font name, size, weight, etc) can be replaced with your own preferred values!