Blog

CSS Buttons vs Image Buttons

Using Image Buttons versus CSS Buttons is more than just a design issue, but also can greatly affect the performance of your server and your customer’s impression of the speed of the website.

In Zen Cart, when configuring your store, you have the option in ADMIN->CONFIGURATION->LAYOUT SETTINGS to select whether or not to use CSS buttons.  A CSS button is a button generated using rules in a CSS stylesheet instead to using images as buttons.

Let’s take a look at some of the advantages and disadvantages of each option.  Note that these characteristics are not isolated to Zen Cart websites but all websites in general.

Image Buttons

Example of a submit button using an image:

<input type="submit" src="http://www.domain.com/images/button_submit.jpg" alt="Submit the Form" value="Submit the Form" />

Example of a link button using an image:

<a href="http://www.domain.com/index.php" title="Some Page"><img src="http://www.domain.com/images/button_link.jpg" /></a>

Advantages

  • They are generally pretty easy to setup.  You merely have to replace the existing Zen Cart button set with your new button set and modify includes/languages/english/button_names.php with any file name changes (i.e. .gif is now .jpg).
  • When you’d like to make a change to a button, you can just replace that individual file.
  • They are very easy to position as you only need a single input or button element to style.

Disadvantages

  • For every individual button, you’ll need to create a separate image and maintain these images on your server.  Even if the image is
  • For every instance of a button on your website the customer will have to download this image from your server.  Each object that has to be downloaded from your server adds additional latency to the page loading time, regardless of the size of the object.
  • Adding events such as an onmouseover event is difficult and often needs JavaScript.  The mouseover image also must be downloaded separately for every button.
  • If you need to make a change to all of your buttons, you’ll need to replace every image.

CSS Buttons

Example of a submit button using CSS (note the JavaScript is used for IE6 which does not support attaching a hover event to anything other than a link):

<button onmouseout="this.className='cssButton button_submit'" onmouseover="this.className+=' cssButtonHover  button_submit  button_submitHover'" style="width: 72px;"><span>Search</span></button>

Example of a link button using CSS:

<a title="Zen Cart Modules by Numinix" href="https://www.numinix.com/downloads/zen-cart-modules"><span onmouseout="this.className='cssButton'" onmouseover="this.className+=' cssButtonHover  Hover'" style="width: 96px;" id="navDownloads"><span>Downloads</span></span></a>

Advantages

  • Background image are reused for each button and only have to be downloaded once.
  • Styling one button differently than another is just a matter of applying styles to the id selector thus overriding the class selector.
  • Hover (onmouseover) events do not need JavaScript and can use the same image for every button.
  • Making changes to all of the buttons is as easy as editing the button class.

Disadvantages

  • Initial setup requires a web designer to create a stylesheet for the button class and each individual button that needs distinguishing features from the others (i.e. different background color).
  • Positioning the buttons using CSS can be difficult depending on your button design and the number of elements used to create the button.  In older browsers like IE6 and IE7 it can be particularly difficult and you may find you either need to use browser specific stylesheets or you have to rewrite your stylesheet code.

Conclusion

When it comes to website speed, CSS buttons are king over Image buttons because they require way less downloadable objects to create the set of buttons.  Often the buttons will use the same background image and same hover image which means only 2 objects need to be downloaded.  Even if they don’t you can always use a CSS sprite to combine all of the different background images for your button variations into a single downloadable object.  Maintaining all of your buttons as a whole is also very easy as you will only need to modify your button class.  The biggest impediment of CSS buttons is the skill of the web designer and their knowledge of CSS.  Thus, if you are not very familiar with CSS, you may be stuck with Image buttons.  Another difficulty is making a CSS button look fancy using icons that change from button to button.  It is a lot easier to use an Image button in this case.

So, there you have it.  The end results of CSS buttons are, in my opinion, superior to Image buttons, but they take a lot more work to setup.  The great thing is that once they are setup, CSS buttons are easy to maintain.

Leave a Reply

Your email address will not be published. Required fields are marked *

    Get quote Live
    Chat