How to Create a CSS Style Button in WordPress

How to add CSS style to WordPress

Generally, WordPress doesn’t allow CSS styled objects in WordPress, but in this tutorial, we will learn how to do it.

We will try to add CSS style to an HTML Button easily without updating the core-codes of the WordPress, Remember that this tutorial is intended for the self-hosted WordPress. This is just an example code of how we can do some CSS customization in WordPress easily.


Here is the common button without CSS Style

and here is a another button with CSS Style

Why doesn’t it work?

You can try this CSS code in your WordPress post but this will not work without doing some customization in your WordPress website, unless you found another way already

CSS and html code

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
    background-color: green;
}
</style>
</head>
<body>

<h2>A CSS Button</h2>

<button class="button">CSS Styled Button</button>

</body>
</html>

So How to add CSS style to a button in WordPress?

Go to your WordPress admin panel, in the menu left, select Appearance, then select Customize, and in the next menu, Choose “Additional CSS”.

Here are the screenshots

Theme edit wordpress

theme menu wordpress

custom css wordpress


This is the Custom CSS code input field, here you can insert your custom CSS codes to style your WordPress site the way you want, I’m not sure if this option is available in all themes of WordPress. So In the Additional CSS Text input field, insert the following code

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button:hover {
    background-color: green;
}

Now save this code, and go to your post editor, Try to add a css style button insert this code in your post in your WordPress post editor (Not in visual editor, insert this code in text editor)

<button class="button">Styled Button</button>

That’s it, Now you have a styled button, you can add link to it and customize the way you want.

Related Posts

Fix uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:_flutter_android]

This error can be fixed by modifying build.gradle file in the flutter In android studio: go to android>app>build.gradle and modify it as follows:

Easily Integrate Stripe Payment Gateway in PHP for Any Website

Introduction: In today’s digital world, accepting online payments securely is crucial for businesses. Stripe, a popular payment gateway, provides a reliable and user-friendly platform for processing payments….

How to build API for your Website?

Are you looking to improve the functionality of your website and enhance your users’ experience? One effective way to do this is by integrating an API, or…

Don’t Panic: What to Do If Your Phone Won’t Turn On

Don’t Panic: What to Do If Your Phone Won’t Turn On If your phone won’t switch on, it might be the greatest nightmare. Because a phone is…

How to create a Database in MYSQL using PHP

Creating a database in MySQL using PHP is a common task that many web developers need to do. A database is a collection of data that is…

HTML Redirect to Other Web Page Automatically

How to redirect to another web page with html code Redirecting a page to another page is simple, you can use the below code to do that,…

Leave a Reply

Your email address will not be published. Required fields are marked *