Today I’m going to show you how to create WordPress buttons that are as beautiful as they are fast to make using the MaxButtons Pro WordPress button plugin. The first step is to open up your WordPress website dashboard and click on the MaxButtons Pro icon. In the top left of the screen click the ‘Add New’ button to get started.
Right away you can see the default button in the preview window in the top right corner. As you change the settings, this preview will update in real time to show you what your button looks like. If you want to dive right in, our online button generator can create (limited) buttons to get a taste.
To start, we’ll create a name for the button. If you would like, you can add a description with more detail as to what you will use this button for. In this demo I am going to create an ‘Add to Cart’ button and so I am going to leave the description blank. The URL field is the page this button leads to when it is clicked. You can fill it in now or come back and edit it later.
Dimension and text
The next step is to change the dimensions and choose the size of the button. Depending on where the button will be placed on your website, the optimal size of the button can vary. For call to action buttons on a home page, they should be bigger, but if you want an add to cart button next to all your products, you’ll probably want a smaller more compact button. My ‘Add to cart’ button will be 140 pixels wide by 40 pixels tall.
Next, I’ll add the text to the button: Add to Cart. For this design, I’m going to use all caps for the text but you can choose the look you would like and select any font or style. I’m going to choose the Open Sans Google Font that is preinstalled with the plugin and a font size of 14.
In order to center the text vertically on the button, I will need to adjust the default padding. I’m going to set it to 14, 15, 0, 0 but I’ll come back and adjust it once I’ve added the icon.
Adding the Icon
Next, I scroll down to the icon section. Today I’m going to use a font awesome icon that is also preloaded into the MaxButtons Pro plugin. I click the box for “Use font awesome icon” and then I click on the select icon button. With over 674 icons to choose from, this makes it very easy to make a button that looks great and is quick and simple to create.
I scroll down and select the icon I’d like to use and choose one of the plus icons. Looking at the preview window, I see that the icon size is too big for my button so I adjust it to be 20 px. Then I need to position it using the padding. Entering in 11 pixels from the top centers the icon vertically and then I use the left padding to move it closer to the center horizontally and the right padding value of 5 to create space between the icon and the text. The adjustments depends on the size of your icon and sometimes you have to play around with the numbers until it looks right to you.
Shadows and gradients
Next, I’d like this to be a flat button design so I’m going to take away the border, shadow and gradient. To do this, scroll down to the border section and change the values for the border width and shadow width to zero. Depending on the style of your button, you may want to make the border thicker or increase the size of the shadow. There are so many options and it’s completely up to you.
To remove the gradient, I scroll up to the color section. Here, I’m going to click on the first green color box and select the color I like. Then, I’m going to copy the color number and paste it into the other color boxes. I’d like this button to be gray and then when someone hovers over the button with their mouse, it’s going to turn orange. So in the hover color boxes below, I’m going to choose the orange color and then copy and paste it across.
And there we go! This button is complete and all I need to do is scroll to the top and hit the save button. Now this button is ready to use on any page or post of my WordPress website. All I have to do is copy the button shortcode for the button and it will appear on the page.
Thanks for checking our video on how to create WordPress buttons and we look forward to seeing what you can create with Get MaxButtons Pro today!