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
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.
