How to Use a Free Website Button Generator to Create Hover Buttons?

How to Use a Free Website Button Generator to Create Hover Buttons?

Have you wondered how to add those nice Call to Action buttons to your blog posts and pages? In my how-to tutorial “How to make a Blog Button” I showed an easy way to make nice buttons for your articles and blog posts. But they were static, not hover buttons. In this How-to Tutorial, I show you how to use a free website button generator to make cool looking hover buttons. Also, I show you how to insert them into your blog posts and pages. So let’s dig into the details.

1. Install a Plugin

The easiest way to make those hover buttons is to use some plugin, which generate hover buttons for you.

1. Login to your WordPress dashboard and click on Plugins→ Add New.

Add a new plugin in WordPress

2. Into the Search plugin field at the top right type Maxbuttons: WordPress Button Generator and hit Enter.

3. Once you have found the right plugin, click Install.

4. After the installation is complete, click the blue “Activate” link.

Congratulations: The plugin is installed and activated! You can start using it.

2. How to Create Hover Buttons?

Now I show you how to make Call to Action buttons. Please notice that there is a new Buttons link added to the WordPress main menu. Click on it.

A new button is added to the WordPress main menu

This is the place where you create your Call to Action buttons.

2.1. Creating the Very First Call to Action Button

If this your very first button just click on Add New button.


2.1.1. The Basics Section

The new window that opens now has quite a many options for you. But, in fact, you only need to fill these 4 fields: Name, Description, URL and Text.

The only field that you need to fill when creating Call to Action buttons

Here these Name and Description are just descriptive and not really important.

  • URL – Type here the link to your landing page that you want to be opened when the button is clicked.
  • Text – Type the actual words that appear on the button.
  • Open in New Window – I recommend to check it too.


2.1.2. Colours of a Hover Button

As you have already noticed, the default colours of these hover buttons are green and blue. Green is for the normal button and blue for the hover button. In case you want to change these colours, scroll down to Colors section and then pick whatever colours you like.

This is where you change the colors of the hover button

Gradient Start and Gradient End means that the top of the button is slightly lighter and bottom darker. So you may want to change all 4 colors.


2.1.3. Text Attributes

In the Text section, you can change text attributes such as Font, Size, Style, etc. Just play around and find a most suitable parameters for your button.

After you have done with preferences, scroll down and click on the blue Save button.

Now your button is created and added to the Maxbutton buttons list. To see it, just click on the Buttons link at the WordPress Main menu.

This button is created by Maxbuttons plugin

Here you also see, how these attributes – Name and Description are used. The blue title “Download my ebook” is the name of the button. The text “This button takes customers to my landing page” is the description.

Before I show you how to insert the button into your blog post I show how to create another button, similar to this one.

2.2. Creating the 2nd Hover Button

As before click on the Buttons link at the WordPress menu.

Ater that you have 2 options:

a. Create a totally different button

If you want to create a totally different button with different characteristics like different colours, text attributes, border attributes, etc. Then just click Add New and build a new button following the instructions above.-

b. Create a similar button to the first one.

1. In this case, select the button that you already created and click on the Edit link.

2. In the Add/Edit Button window click on the Copy button on the menu above.

Make a copy of a previous button

3. Make your changes (Name, Description, URL and Text) and then scroll down and click on Save. That’s it. Maxbuttons just created yet another hover button.

3. Inserting a Call to Action Button Into a Blog Post

If you have installed and activated Maxbuttons WordPress Button Generator, you also have a new button next to Add Media button:

Add button to add Call to Action button into your blog post

1. To add your already created hover button into your article just put the cursor into the right place in your text. Then hit this Insert This Button.

2. After that Maxbuttons plugin inserts a shortcode into your text. It’s something like that:

This short code adds a hover button to your article



That’s it. Update your blog post and see. The button is there, waiting to be clicked on it.


4. Conclusion

There are different ways to make and add Call to Action buttons into your article. This tutorial shows you one easy way to do it. If you follow the steps above you can easily create cool looking hover buttons and insert them into your blog posts.

What other ways do you use to create hover buttons? Please drop your thoughts in the comment box below. Thank you :)




  1. Haha. I woke up down today. You’ve chereed me up!

    • Really? Glad to hear.

      Thank you for sharing and I am happy if I could help. But this is how life is. Sometimes we are down (or at least we feel that way). It’s great if there is something or somebody to cheer us up again. :)

Leave a Reply

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