Affordance is when the appearance of an object describes it's purpose. Buttons are a great example, they should look like they're press-able.
Mike Foskett - ) (incept: )
Nice 'n' shiny likes
Shiny buttons with affordance
Designed and developed by James Kyle and shamelessly pilfered from: cssdeck.com.
Any background colour may be used with this button method, but check the contrast ratio meets WCAG AA.
The effect is controlled by a multi-box-shadow which overlays the button, one for each state.
All state changes are animated via a transition.
Example buttons (well <div>s actually)
A tad dull perhaps but they remain my person preference.
Black to white
The brightest values acceptable for WCAG AA with white text and text-shadow.
Using an anchor as an action trigger is considered poor semantics. If it does something it's a button, if it goes somewhere it's a link. Simples.
Button colours are stated as simply as this.
Generic button class.
Hover, focus and active states only change the box shadow.
A little shine at top of the button helps.
The shadows, without Sir Cliff
Shadows on white, without interactions, so you can see the effect applied on each state clearly.
Normal - soft internal gradient:
Hover - faint internal gradient, plus external shadow:
Focus - same as hover:
Active - harsher edge internal gradient:
WCAG AA color contrast and the drop shadow
Obviously white text on white background fails, but what if you use a 1 px black outline? According to the WCAG that is acceptable.
For example white on red (#F00) fails but would pass if the red used was #F00000. A pretty close alternative.
With #F00 the button drop-shadow darkens immediately around the text to #D73D37, which passes AA. Adding the default text-shadow darkens it further to #C53933.
In this specific circumstance white text with #F00 background (including shadowing) easily passes WCAG AA.
Let's consider lime-green #F00. Without shadowing it would need to be #008B00 to pass AA. A considerable difference. With the default shadowing the text is next to #64D52C also a failure. Increasing the text-shadow improves it little. From my tests there appears to be nothing short of using black text or a #009700 background (with shadowing).