FreshDirect CSS Button Examples

Purple, medium:

• make new list

Orange, small:

• add to cart

Blue, small:

• customize

Green, small:

• reset
• go
• add

Green, medium:

• show all

Green, large:

• ok
• yes

Brown, medium:

• search

Brown, large:

• no

Button with graphical icon on left:

• delete this list

Buttons with graphical icons on right (1st attempt)
These are all CSS except for the graphics on the right-hand side of each. It may not be possible to reliably match the left text portion with the right graphical portion. Impelementing hover states would require two images per button. These examples work OK in Mac Safari and Mac Chrome, but not Mac Firefox. Untested on Windows browsers yet.

• add selected to list
• add selected to cart

Buttons with graphical icons on right (2nd attempt)
Revised versions of the above. Avoids the problems iintroduced by the irregular shape of the above designs. These examples should be fine in all relatively current browsers.

• add selected to list
• add selected to cart

How they Work

The basic HTML looks like this:

<a href="#">make new list</a>

The CSS button styles in this example page are organized such that you can style a link as a button, choose the color & size, like this:

<a href="#" class="button buttonM FDpurple">make new list</a>

 

Some Advantages of HTML & CSS Buttons

• reduced graphics production work
• reduces overall page weight
• fewer assets = fewer hits on server
• greater accessibility (for cases like disabled users with screen readers)
• resolution independent
• allows for visual feedback (hover & active states) without javascript or images
• easily revisable (for instance, a button label can be changed without having to make a new graphic, or all buttons' visual appearances can be changed across the entire site at once by modifying the CSS)
• can be conditionally styled for different contexts (for instance, larger on touch devices than on desktop browsers)
• would allow for the use of webfonts (not demonstrated in these examples)
• degrades gracefully (for instance, browsers that don't support the CSS3 border-radius property will simply display rectangles, and browsers that don't support CCS3 gradients will display a fallback solid background color). For example, Windows IE8 might display the "make new list" button like this:
  make new list