iPad-cover

The tools for small business owners to produce their own Internet marketing get easier every day. There’s no-code email, no-code form builders, drag-and-drop website makers, you name it. And it’s great. But there’s one thing that’s still frustratingly hard to do: buttons.

[su_button url=”#” target=”blank” style=”flat” background=”#FF7100″ size=”6″ wide=”no” center=”no” radius=”5″ ]Why is this so hard?[/su_button] [su_spacer size=”20″]

Making links is easy, but adding professional-looking call to action buttons to posts and pages is tricky. Without HTML and coding skills, you can’t make one from scratch. There are many so-called page builder themes and plugins to create “build-in buttons”, but you need the right circumstances to use them. Can’t just add one whenever it feels good.

While I support strategic thinking in content development, I also support doing whatever-the-heck you want with your website. It should be as easy to insert buttons as it is to insert pictures. And it can be.

When my favorite page builder can’t quite do what I want, I use a plugin called Shortcodes Ultimate to bridge the gap. It’s like a toolbox for inserting all kinds of neat elements into posts and pages. This post will focus on inserting a basic button with custom color, font size and icon.

Install and Activate Shortcodes Ultimate

To get started, you need to have this plugin installed on your self-hosted WordPress website. Got that? If you’re wondering what WordPress is about, check out this video first.

Once you’ve got the plugin, crack open a new draft post.

Insert Shortcodes

Shortcodes Ultimate adds a new button to the post editor. Look for Insert Shortcodes right next to Add Media. They’re both above the formatting toolbar. Click the button to display the shortcodes menu.

Shortcodes Screenshot

It’s kind of intimidating at first. And there’s no evidence of an ordering system. Just 55+ icons and a search bar at the top. Thankfully, the search works super well. Type in “Button” to highlight just the icon for creating buttons.

Make a Button

When you click the icon, the menu slides away and you see the form to fill out for making a button. It starts with a Link.

A button is really nothing more than a gussied-up URL. You use buttons when you want visitors to take an action, typically clicking that link to see additional content like your contact info or another landing page

So, your first step in making a button with Shortcodes Ultimate is to find your link. Copy and paste it into the form field.

The next option is titled Target. This option lets you control what happens when someone clicks the button. Choose whether you want links to open in a new window/tab or the same one.

Style your button

Time to add flair. Shortcodes Ultimate asks you to pick from a list of nine styles, sight unseen. Check the cheatsheet below if you want an idea of how each looks.

[su_row] [su_column size=”1/4″] [su_button url=”#” target=”blank” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Default[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”flat” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Flat[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”ghost” background=”#FF7100″ color=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Ghost[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”soft” background=”#FF7100″ color=”#FFf” size=”6″ wide=”yes” center=”yes” radius=”5″]Soft[/su_button] [/su_column] [/su_row] [su_row] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”glass” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Glass[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”noise” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Noise[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”bubbles” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Bubbles[/su_button] [/su_column] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”stroked” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]Stroked[/su_button] [/su_column] [/su_row] [su_row] [su_column size=”1/4″] [su_button url=”#” target=”blank” style=”3d” background=”#FF7100″ size=”6″ wide=”yes” center=”yes” radius=”5″]3D[/su_button] [/su_column] [su_column size=”1/4″] [/su_column] [su_column size=”1/4″] [/su_column] [su_column size=”1/4″] [/su_column] [/su_row]

If you don’t have time to experiment, pick Flat to start simple. Next, pick your background color. Ideally, you’ll choose a color that already exists in your brand.

It could be your main brand color, or maybe a complementary color. Roundpeg’s classic blue and teal are complemented by a bright orange we use exclusively for call to action buttons and links.

Next, pick your text color. If you’ve picked a dark background color, you want something that contrasts, like white. Click the color bar to choose the hue and shade.

Size your button

The next three options affect the size and alignment of your button and its text. Use the slider to find the perfect size. I like to choose six for a nice, medium sized button.

Choose whether your button should be fluid or not. This basically lets you set your button to be 100% width, all the way across the page if you want. Great for narrow spaces, but probably not necessary otherwise.

You can also choose whether your button should be centered on the page, otherwise it will be left aligned.

Polish your button

Radius, icon and icon color, and text shadow put an extra shine on your work. If you want round edges, choose a 5px radius. Or pick square for a modern look. Text shadow is kind of pointless unless you’re artsy enough to craft a faux debossing effect.

Adding an icon to your button is where it really takes off. Shortcodes Ultimate lets you pick from a mini-library of icons that should cover most needs. If not, you can pick an image from your media library, assuming you have a tiny image ready to be an icon.

When you choose from the icon picker, you can also choose the icon’s color. It should be the same color as your button text.

Skip the next five settings

If you read the descriptive text below these settings and understand it, you know what to do with them. If not, don’t worry about them and move on to Content.

Type your button text

The field titled Content is where you put your button text. Remember to write text that engages and persuades visitors. Use active verbs that concisely communicate what the button links to. Words like join, read, donate and pay work great.

Preview and insert your button

Now that you’ve worked so hard on filling out this form, click Preview to see how it will look before you insert it. If something needs work, go back up and fix it.

When you’re done, click insert shortcode to add the button shortcodes to your post or page. This will look like a text readout of all the options we configured above. But rest assured, when your content is published, that button will be there.


You think your website is great, so why do people hate it? Check out our webinar to find out why.

Webinar_HateYourWebsite_Footer-01