Also regarding action text: short and sweet if you can.
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.