How to style a CTA Button in a Rich Text content field? – SEOmatic

Introduction

In this tutorial, you'll learn how to inspect your button, find its class name, and apply custom CSS styles by adding a code block in your rich text content field.

Step 1: Inspect the Button and Find the Class Name

Right-click on the button.

Select "Inspect" (or "Inspect Element").

The Developer Tools panel will open, showing the HTML structure.

Look for the button inside an anchor (<a>) tag and its surrounding <div>.

From the screenshot, we can see that:

The button is inside a rich text content field with the class .w-richtext.

The button is also inside an <a> tag.

To target this button in CSS, we will use .w-richtext a button.

💡

You must replace .w-richtext with the actual class name you find in your own inspection.

Step 2: Add Custom CSS Inside the Code Block

Now that you know the class name, go back to your content and inside the code block, add the following CSS:

<style>
/* Style the CTA button inside a rich text field */
.w-richtext a button {
    background-color: #007bff; /* Modern blue */
    color: white; /* White text */
    border: none; /* Removes default button border */
    padding: 12px 24px; /* Adjusts button size */
    font-size: 16px; /* Sets readable text size */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Shows pointer on hover */
    transition: background-color 0.3s; /* Smooth hover effect */
}

/* Hover effect: Changes background color on hover */
.w-richtext a button:hover {
    background-color: #0056b3; /* Darker blue */
}
</style>

You can tweak the styles to match your website’s design. Here is how it will look like in your Rich Text content field.

Contact and Support

For further assistance, feel free to reach out to our support team. Contact us at contact@seomatic.ai or via chat.