As an aside, your call to action link needs some styling to make it stand out. It took my eye ages to find it. You need a chunky background color on it or something to highlight it ... maybe rounded corners, too.

Totally agree about the call to action, it was something I was going to work on but you inspired me to do it now. I have been absent for quite a few months so I am very rusty now with css code so I tried to add my new call to action image. On doing so it does not show up. Any ideas why? I added some styling and a nice orange image with corners and white text but still nothing

Yes sorted!!! But what do you thing of the call to action? I can't make up my mind, it seems a little busy now

Maybe make "Click here to make the first move" in orange (the same orange that is currently its background), and have a transparent background with a 2 pixel oval/circle around that sentence?

Also, within that green container, I noticed that there is a green rectangle on the top left and the top right which stands out as being a different shade of the rest of the green. Not sure if this is somehow on purpose or for a specific reason?

I find "click here", even on a link text that DOES have more information, a waste of space. What the heck else will someone think of doing to a link? People have been already pretty well trained to click things that look like links and buttons.

Calls-to-action are indeed often styled like buttons: just have the link text state what hitting that button would do for the user ("make the first move" for example, though that sounds a little vague). "Subscribe", "Buy now!", "Get your discount now!", "Start", "Complete purchase", etc. Action text. Telling someone to click there is redundant and makes the rest of your text more likely to be skipped by skimmers (according to Nielsen research, skimmers read just a few words starting a sentence or link).

Though, this link is inaccessible to many people anyway. It would be really nice if it had actual link text, and if it reacted on :focus. The negative text-indent isn't recommended for a variety of reasons.

Unless you need some fancy weird font people won't have on their systems, removing the text and using an image (which has no fancy text that I can see) is a problem. This problem can be solved by letting real white text sit on real orange background colours. This allows you to use CSS to show user feedback on :hover, :focus and even :active. I makes the text available whether the image loads or not. It allows people to let their computer contrast settings make that text more readable if necessary. It allows people to highlight and copy that text. And you can get that shrink-wrapped look of a button by changing display: block to display: inline-block, where the anchor keeps its block properties except it won't extend to 100% width like static blocks do. Give it some padding all the way around and you can round the corners, add a slight background shadow and other goodies with pure CSS. You can then change these during the feedback states (focus, hover, etc).

If you did though find an image that did what CSS or the user's fonts cannot, Gilder-Levin is a more accessible technique.

Yes good point!!! Thinking up a good call to action now in replace. Your other suggestion sounds the better way to go although I have strayed away from it so far, I guess now is the time to change practice. So can you help a little further to make it clear for me.

my html would simplt be:

<a href="http://organicwebdesigns.co/quote" id="cta">Make the first move, catch me while you can</a>

But assuming this HTML:<a href="http://organicwebdesigns.co/quote" id="cta">Make the first move, catch me while you can</a>

You'd want:

cta {

position: relative; (this is only for having button-y feedback when the user clicks... see below to :active state)display: inline-block; margin-left: 20px; margin-top: 5px; background-color: #e35413; color: #fff; min-height: 27px; (let it grow if user enlarges text)font-weight: bold;font-size: 1.2em; (I strongly encourage setting a font-size and line-height... buttons should stand out! text-decoration: none;text-align: center; (instead of a width we'll use padding, but if you do add a width, this'll keep text in the middle)padding: 5px 7px; (or something... for things like buttons, even if I set font-size in something like em, I notice I tend to do px for padding. Padding is like the inner layer of fat. It'll keep the outside edge further away from the internal organs (text). Play with these numbers until you are satisfied visually)text-shadow: 0 1px 2px rgba(51,51,51,0.6); (optional, should make the white letters seem a tad raised and might make them more readable esp if the orange isn't very dark)border-radius: 5px; (again here I also use px if it's a tiny edge. If it's a large edge, it'll need to grow if the whole element does, and I'll use em instead)box-shadow: 3px 3px 3px rgba(51,51,51,0.6); (again optional... this one I'm not sure of the browser support, and might still need the prefixed versions here too)}

:active is the moment when the user is actively clicking on the element. When using the mouse, so long as the mouse button is depressed, the :active state should show. Also triggered by keyboard and styluses(sp?) and other things, but I think not touch. Not sure.

cta:active {

top: 1px; left: 1px; box-shadow: 1px 1px 0 #222; (make shadow smaller and more solid as if user is pressing down on a button)}While being pressed, the button actually kinda looks like it's been pressed: it moves right and down 1px. The shadow might be fugly and you might not want to have it at all on this state (or on the button at all

cta:focus, #cta:hover {

decide some styles for when users are interacting (but not yet clicking) this button. Changing colour/background-colour should only be the sole change if you are changing the colour radically (changing the contrast), otherwise couple it with something else like adding an underline or something (basically we're considering the colour-blind, those with general bad vision and those with crappy-calibrated monitors or with sunshine streaming onto the monitor like what's happening to me right now, ug). Underlines don't tend to look good on buttons but they're an option. It's usually a bad idea to go from bold to normal, or from normal to bold, or italic, etc. Usually this makes the text jump as it changes width and looks teh fugly.}

If you don't want the focus outline, it's okay to remove it using outline: 0; but ONLY if you have something visually obvious on the hover/focus state. Otherwise keyboard users are lost as they navigate your page.

Anyway, those are some ideas. Check the button afterwards in IE 8 and 9 to see the difference. IE<9users will get square boxes with no shadows, but still should be an obvious (if fugly) button... I forget what IE9 supports. 10 should support all of the CSS3 stuff. Keep this in mind when making your hover/focus state, that it's not only affecting schmancy CSS3 things.

We're assuming "link" here means an anchor who is inline with text and therefore merely styled similar to the text around it, but with something to make it look "linky" like an underline and a different colour and a reaction to the mouse.

"Button" here does not mean (only) the <button> element or form submits, but something you style to look like a button (like a call to action). I don't think the article made that clear, because you can have instances of real buttons styled like links, and links styled like buttons.

getting my head into this now, thanks for all the info I'm just about to play around with all your advice. One more thing I changed my cta text to see if I'm free. Do you think that's better? What would you put?

The text suggests I'll maybe get either a contact form to ask you if you are free, or a schedule showing when you are free. What I get is a quote contact form (and I'd have the header on the form page say "Get a quote" or even "get a quote in one simple step"). I'd say something like "get a quote", but one thing that's really easy and awesome for this kind of thing is to show a screenshot of your web page as it is now to various random people, and say

"Let's say you're on your computer and you are looking for web site design services etc. and you end up at this page. What do you expect if you hit this button?"

Regular non-techy people will tell you where they think they'll go or where they expect to end up when hitting that. You might have to tell them the button is a clickable thing if it's just a screenshot or printout; that's ok.You can also ask them, showing a screenshot of the whole page, "where would you go if you just wanted to know what some site might cost?" and "where would you go if you wanted to know x?" where x is the typical tasks you expect users to do on your web site.

This is a really simple easy type of usability testing and no matter how well you've built your page, you'll usually always find stuff that's wrong enough to cause potential problems and easy to fix. Button text is usually within the realm of a web copywriter but we're assuming you're your own copywriter so usability testing is the easier way to find the text you need.

The trick is asking people questions without inadvertently implying an answer