WordPress.com & nice call to action buttons

During the restructure of my business I’ve been using this blog as my main website (more details on the reasoning behind that here). I do like using WordPress.com (as opposed to self-hosting) as, on this occasion, I like living with the (minor) constraints; this helps me focus on my content.

However, the lack of nice buttons always bugged me…

Method A

Obviously you can simply create a horizontal image button (see below) but that’s a sledgehammer to crack a walnut; it’s not really the right tool for the job. You’d also need a nice package like Photoshop or, my preference, Fireworks to create them (or re-create them if you wanted to change the text etc).

Fig1. This is an image (sadly)

Fig1. This is an image (sadly)

There has to be a better way…

Disclaimer: This is not rocket science & I’m not pretending I’ve invented this first but I honestly haven’t been able to find a WordPress.com version (plenty of self hosted plugins).

Method B

With this sassier approach we’ll need to roll up our sleeves and look at HTML and CSS. Let’s walk through the steps…

1) Purchase Custom Design

First things first, you will need to have purchased custom design for your theme as we need to add in some CSS.

2) Create your button

Jog along to http://www.bestcssbuttongenerator.com/ and select/create the button style you want.

3) Copy the code

Follow the instructions on the website and you’ll be able to select the CSS code (it’s the bit in the bottom window of Fig.2 beginning with “.myButton {“).

Fig2: Click the button & copy the code (CSS is in the bottom)

Fig2: Click the button & copy the code (CSS is in the bottom)

4) Add to your custom Design

You’ll now need to add this CSS code into your custom design; remember you will need to purchase the add on for this.

Screen Shot 2013-10-17 at 18.41.56

To add in the code, you need to select “CSS” when on the customiser (which can be found under “Appearance / Custom Design” when you’re in the admin section).

Note: I would add your new code to the very bottom of the CSS file, you don’t want to override anything that is currently there.

After you’ve done that,  click SAVE. And after it’s saved, click CANCEL* to get back to where you were.

(*as an aside note, I don’t really like them calling this button CANCEL as that is not really what we are doing, we’re not ‘cancelling’, we ‘returning’).

5) Edit your page/post

Now go to the page or post which you want to add the button to.

Important! you must go into TEXT mode on the editor (not VISUAL).

6) Paste in the button code

We’re NOT talking about the CSS code you played with earlier; here we’re talking about the tiny bit of HTML which triggers the button (this is also in a field which you can copy and paste from the http://www.bestcssbuttongenerator.com/ website). It looks like this:

<a href="#" class="myButton">my button</a>

In case you don’t know, the bit which says href=”#” refers to where the button will link to when clicked. So you want to replace the # with the destination (don’t forget the http:// bit).

And the ‘my button‘ text in the middle should be set to whatever you want.

Note: the class=”myButton” is very important, don’t delete it or change it.

E.g. if I wanted to create a button which asked people to signup to my newsletter (ahem!), I might write this code:

<a class="myButton" href="https://confirmsubscription.com/h/r/354A742795116837">Sign up to receive yours, you know you want to!</a>

…which should now appear as a nice, shiny button :)

Sign up to receive yours, you know you want to!

…if you don’t see a nice button above then maybe you’re using an old web browser. If that’s the case then you should still at least see the link; which means nothing is broken & folks can still click what you want them to click.

Have fun!


p.s. I’m going to keep refining this. I’m not really happy with the CSS code, we need something a little more modular with as clean CSS as possible. WordPress.com supports CSS pre-compilers so there will be a few options here. I’ll update this when I can.

Tags: , , , ,
No Comments

Leave a Reply