Add Beautiful Buttons in WordPress Posts & Pages without any Plugin

Beautiful WordPress ButtonsWhich WordPress editor do you use?

If you use the Classic Editor then there is no default option to create buttons and if you use the Gutenberg Editor then the default buttons don’t look good.

I use the Classic editor and tried many WordPress plugins to create buttons but nothing worked great – some were slowing down the site and some were not looking good at all.

After that, I created a simple custom button for my website without using any plugin and it literally takes only 2 minutes to create.

So, let me show you the simplest way to create beautiful buttons in your WordPress posts and pages, like the below ones.

CLICK ME #1

CLICK ME #2

Liked these buttons?

Well, here we go with the exact method then…

Creating Beautiful Buttons for Your WordPress Website

First of all, you will need to add some simple CSS codes to your Additional CSS section of the Customize option. And, after that, if you add the specific class to any of your links, the button will be automatically created.

Let me break this in simple baby steps.

Step 1: Go to Customizer

First, you will need to go to the Customizer by clicking on the Appearance > Customize button.

Appearance - Customize in WordPress Site

Step 2: Go to Additional CSS

Almost all the WordPress themes have this Additional CSS option in the Customizer. Click on the Additional CSS (sometimes called as Custom CSS too) which is generally present at the bottom of the left side menu.

Additional or Custom CSS in WordPress

Step 3: Add the Custom CSS Codes

Copy and paste the below CSS codes in your Additional CSS section and click on the Publish button.

.my-button1 {
background-color: #ff9800;
border: none;
color: #ffffff !important;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
border-radius:2px;
}

.my-button1:hover{
background-color: #FFB74D;
}

You can change the background colour and hover colour along with the text colour by modifying the hex colour values in the above CSS code.

Add Additional CSS in the WordPress site

Step 4: Create Buttons

This is the final step.

Just go to the page/post where you want to display the button and simply type the text that you want to be shown on the button and add the proper hyperlink to that text.

Now, go to Text editor from the Visual editor and add the class= “my-button1” to the <a></a> tag as shown in the image below.

Add Class in the <a> </a> Tag

The code in the Text editor should look something like:

<a class="my-button1" href="#">Click Me #1</a>

Just replace the # with your link, and when you preview or publish the page/post, the simple text link will be converted to a beautiful button.

Yes, I told you that it’s not rocket science.

Wrapping it Up

I would recommend you to play a bit with the CSS codes in the Additional CSS in order to customize your button as per your needs.

For example, if you want your button’s corners to be rounder then just increase the value of the border-radius until you get satisfied.

Yes, it’s very simple, just try changing the different values a bit and reloading the page/post in the new tab.

That’s it.

And, if you get stuck somewhere or have any related query, feel free to let me know in the comments right now.

Also, share this trick with the people who you think might be interested in reading it.

Deepak

Founder, digiTechnolog | Blogger, Digital Marketer, and a WordPress Expert. Writes about Blogging, Productivity Tips, SEO & a few other Internet related Tips-tricks.

Leave a Reply