Matching or contrasting buttons, though not a necessity, can make a strikingly attractive and unifying addition to a website. Here are some different type buttons for your consideration. These are only examples. Text choices are equally vast — painted, raised, engraved, etc. You are limited only by your imagination! Should you decide to go this route, we will discuss design considerations and trade-offs during your free pre-sale consultation. Of course, text-based “breadcrumb” navigation is also an option and an excellent choice for dynamic websites. Also, due to recent advances in CSS, it is possible to have a similar button appearance and functionality without the need for images at all. Use a mouse-oriented computer to check the Display button on the CSS Editor. Notice how the button diplays three unique states — static, mouseover (i.e., when the mouse pointer is hovered over the button), and active (i.e., ‘clicked’). On a device without a mouse, like a mobile phone, there is no ‘hover’ state… the same as with actual images.

Shown above are single-state, or WYSIWYG (What You See Is What You Get) examples.

Below is an example of a dual-state button (changes when the mouse hovers or clicks).

Finally, an example of a tri-state button (normal, hover, and click states).

TIP: When searching the Web for ideas, try clicking then dragging the mouse button off the image. This allows you to view all the state changes, without having to click over to the next page.

Be sure to also check our “Freebies” area for more design tips and ideas

« PREV | NEXT »