This post may contain affiliate links. Read my full disclosure page here.
As promised in my last post, I am here to show you how to create buttons on your website!
So you may be wondering “Why would I need to create a button on my website?”. I’m glad you asked! Adding buttons can help you share your social media links, offer products, and even connect with your readers. The great thing about buttons is that they can be fully customizable, so there isn’t really a limit to what you can and can’t do! So let’s jump on in so I can show you how to create buttons on your website!
So since I am not a super techy type person, I used a plugin to help me create my buttons. When you create buttons on your website, the first thing you want to do is either decide if you will code it all yourself, or if you want to make things a little easier. Of course, I chose the latter, and I downloaded Max Buttons. It’s totally free, and it’s been an amazing addition to my plugin library! Max Buttons boasts that they were the first button plugin created for WordPress. With their 4.8/5 star review, I knew they would be the perfect fit for what I needed!
So now onto the fun part, actually creating your buttons! In my last post, I shared that I created my buttons to help me create my free resource library, and I used them so that my readers could download my e-book and other resources right onto their computer. Once you’ve downloaded the plugin, it’s time to start creating!
Create A New Button
Okay, so first things first. You will want to create a new button. As you can see, I have a few already created, but we are going to walk through this from beginning to end so you can create your own.
Add Your Text
So you have started a new button. When you first see all of the ways you can customize it, you may be a little scared to start creating, but no worries, it’s super easy! Here is how the page will look:
I know, it can look a little intimidating, but with a few more simple steps you will have a new button in no time!
First, you will want to add your text to your button. What do you want your button to say? It could say “Follow Me” or “Download Now”. Whatever it is, add it to the text box.
Customize Look Of Font
Now that you know what your button will say, it’s time to customize the look of your font and how the words look on the button.
This part should be super easy, but make sure you have the padding that you want on your button. If you want your text centered, you’ll have to center the text and then play around with the padding to get it to be exactly where you want it. There is no hard or fast rule of how much padding each side needs, so just work on it until the words are exactly how you want them!
Customize Your Colors
Now that you have the text ready to go on your button, it’s time to customize your colors! You can change everything from the font colors, to the colors of the middle and outside of the button, and even if the color changes when you hover over the button.
I kept things simple when I created my buttons and opted for black and white for the button and teal when you hover over it. However, feel free to customize your button to fit your brand’s colors.
Add A Shadow (Optional)
While you play around with colors, you have the option to add a shadow to your text. I chose to keep mine flat, mainly because I didn’t want to take the chance and make my button hard to read. If you choose this option, try and make sure that it will be easy to read both on all devices.
Add Your Link
You’re almost done! Once you’ve created the look that you want for your button, it’s time to add your link or media file. Insert the link to the URL slot, and click the “Open In New Window” checkbox. This will take your reader to a new page so they can stay on your blog but still check out your goods! (No, not those goods…but your blog’s goods…)
Make Your Button Mobile Responsive
Now that you’ve gotten your button ready to go, go ahead and make it mobile responsive! Keep in mind that this is still in test mode for the plugin. You can always check your website out on your mobile device to make sure the button works once it’s published. It worked very well with my website and theme!
After you make your button mobile responsive, it’s time to save it and add it to your website!
Create Buttons On Your Website
Once you save your button, you’ll see something like this:
To add your button to any page or post, all you have to do is copy the shortcode ( [maxbutton id=”___”]) and add it to the page or post. Remember, wherever you add it, it will stay. So if you want it at the top of your post, add it there. If you are creating a button because you read my post on creating your resource library, add your button to your text box with Page Builder like this:
After you add the button shortcode, save and update your page or post, and that’s it! You’re done, and now you know how to create buttons on your website. The finished result will look something like this:
See how easy that was? Now that you know how to do it, go ahead and create buttons of your website! If you still have questions on creating your buttons, feel free to comment here, or contact me and ask away!