<button onmouseout=\"this.className='cssButton button_submit'\" onmouseover=\"this.className+=' cssButtonHover\u00a0 button_submit\u00a0 button_submitHover'\" style=\"width: 72px;\"><span>Search<\/span><\/button><\/pre>\nExample of a link button using CSS:<\/p>\n
<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\u00a0 Hover'\" style=\"width: 96px;\" id=\"navDownloads\"><span>Downloads<\/span><\/span><\/a><\/pre>\nAdvantages<\/strong><\/p>\n\n- Background image are reused for each button and only have to be downloaded once.<\/li>\n
- Styling one button differently than another is just a matter of applying styles to the id selector thus overriding the class selector.<\/li>\n
- Hover (onmouseover<\/em>) events do not need JavaScript <\/em>and can use the same image for every button.<\/li>\n
- Making changes to all of the buttons is as easy as editing the button class.<\/li>\n<\/ul>\n
Disadvantages<\/strong><\/p>\n\n- 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).<\/li>\n
- Positioning the buttons using CSS can be difficult depending on your button design and the number of elements used to create the button.\u00a0 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.<\/li>\n<\/ul>\n
Conclusion<\/h2>\n
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.\u00a0 Often the buttons will use the same background image and same hover image which means only 2 objects need to be downloaded.\u00a0 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.\u00a0 Maintaining all of your buttons as a whole is also very easy as you will only need to modify your button class.\u00a0 The biggest impediment of CSS buttons is the skill of the web designer and their knowledge of CSS.\u00a0 Thus, if you are not very familiar with CSS, you may be stuck with Image buttons.\u00a0 Another difficulty is making a CSS button look fancy using icons that change from button to button.\u00a0 It is a lot easier to use an Image button in this case.<\/p>\n
So, there you have it.\u00a0 The end results of CSS buttons are, in my opinion, superior to Image buttons, but they take a lot more work to setup.\u00a0 The great thing is that once they are setup, CSS buttons are easy to maintain.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,3],"tags":[213,58,9,8],"class_list":["post-502","post","type-post","status-publish","format-standard","hentry","category-visual-design","category-zen-cart-optimization","tag-buttons","tag-css","tag-web-design","tag-zen-cart"],"modified_by":"Nurul Afsar","jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":0,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numinix.com\/blog\/wp-json\/wp\/v2\/tags?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}