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

6 Web Design Secrets Every Business Owner Should Know

Photo Credit: Tranmautritam via Pexels 6 Web Design Secrets Every Business Owner Should Know According to industry experts, small businesses need to have a website to attract…

PHP: Get Visitors IP and Location and Save to TXT File

How to get visitors IP address and Location and save them to Text file in php This simple php code can be used to save visitors data…

Show Alert when Visitor Leaving a Web Page

Here is how to show an alert message when a visitor leaving a web page With this code, we can show a message or dialogue of your…

Hide go to Top Button in CSS

How to hide go to top button in CSS The go to top button can be used to go to the top section of your website quickly….

How to Make a Text Blink in CSS

How to Animate or Blink a Text in CSS Blinking texts can capture user attention easily so you can use it for texts that needs more attention…

Change SVG Background Color in CSS

How to Change SVG Color with CSS Properties Hidden content goes hereTo change svg color background, i tried some available methods, but none worked except this code,…

Leave a Reply

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