BeginnersBlog

Make Your Own Buttons That Looks Premium without WordPress Button Plugin [BlogSpot & WordPress]

In full transparency – some of the links on this page are affiliate links, if you use them to make a purchase I will earn a little commission at no additional cost to you. It helps me create valuable content for you and also helps me keep this blog up and running. (Your support will be appreciated!)

Do you use a costly WordPress button plugin? I’m sure most of you do. But you can make your own buttons without wasting your money.

Strange! You would think that you might require hardcore HTML and CSS coding skills to create buttons in WordPress. But to be honest, you don’t need to be a programmer.

Either you are a blogger or a web developer you can create buttons on your own WordPress’ posts or pages.

In this guide, I will tell you everything needs to know. By the end of reading this article, you will learn how to create customised buttons for both WordPress and BlogSpot.

Before getting into it, let’s understand why you shouldn’t always use plugins to add buttons in WordPress.

Reasons not to use WordPress button plugin on your site: –

  1. It’s true that ‘buy now’ buttons help your business to increase user engagement and conversions. But one thing you must know that more plugins you add in your directory, the browser will send more HTTP requests to the server to load the entire site. Resulting, slow processing which influences your rankings and user-experience significantly.
  2. If you are a newbie blogger, then you couldn’t afford that much amount of money.

Now it’s up to whether you make your own free buttons or use premium plugins.

There are two methods to make it possible. The first one is ‘generating the code by yourself’. But as I promised, you don’t need to be a coder.

You just need to visit BestcssButtonGenerator and follow the instructions given below.

Ok, let’s go ahead and make some customised and attractive button to increase user attention and conversions.

STEP BY STEP GUIDE TO MAKE YOUR OWN BUTTONS FOR BOTH BLOGSPOT AND WORDPRESS

First off, I want to show you how to make a button in WordPress. 

ADD A BUTTON IN WORDPRESS THAT LOOKS LIKE PREMIUM

 Step -1

Go to BestcssButtonGenerator. Here you find many verities of buttons.  Select the one you like the most.

Make your own buttons in WordPress

Step – 2

Once you’re in, you can further customise it to make it more attractive. Then press the button that you have selected. As you do it, you’ll get the entire hardcode of CSS and HTML.

WordPress buttons shortcode

Here you find the two type of the code. The very first line of code is HTML that you will use in your post text area, and the remaining code will go to your theme’s style.CSS file. You need just to copy that code separately.  

Step – 3

Next, go to your WordPress admin area and Appearance > Theme > Editor > style.css and paste the entire CSS code.  

[You can also include CSS code by getting into the additional CSS section of your theme. You can find it here: theme> customize > additional CSS. However, some of the developers don’t provide this section. But if you find then it becomes easier to paste the additional CSS without going into style.css file]

here you CSS code goes in WordPress

Once you’ve pasted, click the publish button.

Step – 4

Ok, finally, open your post/page where you want to include the button. Now paste this code [given below] in the text/HTML area.

[Use this code only in your post/page text area, don’t copy it within your CSS file]

<a href=”#” class=”myButton”>twitter</a> 

Replace # with your URL where you want to redirect the visitor after clicking the button. The text ‘twitter’ represents the display name of your button. You can change the button name whatever you want.

How to make your own buttons in WordPress

Additionally, I’ve wrapped my code with <centre></center> tag to center align my button. You can also do the same.

So, finally, the code would look like:  

<center><a href=”#” class=”myButton”>twitter</a></center>

Update the changes and preview your post. You will find a very beautiful button.

Eventually, you’ve made your own button without purchasing the premium plugin.

It was all about WordPress. Now, let see how to MAKE a button in Blogger/BlogSpot platform.

Also Read: Best Blogging Platforms To Start A Blog And Earn Money

MAKE YOUR OWN BUTTON IN BLOGSPOT/BLOGGER

Blogger is also the largest blogging platform after WordPress. But the blogger doesn’t allow any plugins to add the functionality which makes it less flexible than WordPress.

If you’re a skilled developer, then it’s natural to you. But in case you don’t know HTML/CSS then you can follow these steps to create well- actionable buttons for your BlogSpot posts.

The process is pretty similar to WordPress.

Ok, let’s get started.

Step -1

Go to BestcssButtonGenerator and choose your button design.

Step -2

Customize the design according to your requirements.

Step -3

Open your blogger dashboard and Go to Theme > Customize > Advance > Add CSS.

How to make your own buttons in blogger

Where to add the additional code of CSS in BlogSpot

CSS code goes here in Blogger

Once you’ve added, click on ‘apply to blog’ button on the upper-right side corner of the display. After that, click the link ‘back to blogger.’

Step – 4

Lastly, add the HTML code to your post/page HTML area and update the changes. That’s it; you’re done.

  <center><a href=”put action or redirection link” class=”myButton”>Back to Blogger</a></center>

HTML code goes here in Blogspot to show your button

HTML and CSS button

CONCLUSION

I hope you’re now better enough to make your own buttons for both WordPress and BlogSpot. I’m sure you would like it.

Adding a customised button is a good practice to optimise your page for Speed. Why unnecessarily waste the money if you could do it yourself.  You don’t need to invest the money in buying any premium plugin. 

If you have any question regarding BlogSpot & WordPress buttons shortcode, then leave your comment. I will surely help you out.

 

Top AI Writing Tools (Editor's Choice)

Featured

frase-io logo

Frase.io

With Frase.io, you can produce long-form content within an hour. It comes with all essential tools and features that can help you with researching, briefing/outlining, writing, and optimising. Best for bloggers, Freelancers, editors, and Writers.

All In One

Jasper.ai

Jasper helps you write an in-depth article, create a high converting ad copy for your marketing campaign, and generate product descriptions in minutes. Just give a little context to Jasper and its AI will do the rest. The only downside is that it's quite expensive

80+ AI Templates

writesonic logo

Writesonic

Writesonic claims to be the world’s most powerful AI content generator tool which can write 1500 words in 15 seconds. From students to freelancers to bloggers to marketers, anyone can create high quality content with Writesonic.

Beginner friendly

rytr.me logo

Rytr.me

Rytr is powered by state-of-the-art language AI which is capable of creating high-end unique content in minutes. It collects content from around the web, synthesis it with its own knowledge, and creates unique content for the client.

Find Related Content

Shailesh Shakya
Shailesh Shakya

I'm a Professional blogger, Pinterest Influencer, and Affiliate Marketer. I've been blogging since 2017 and helping over 20,000 Readers with blogging, make money online and other similar kinds of stuff. Find me on Pinterest, LinkedIn and Twitter!

Leave a Comment

Your email address will not be published.