CSS3 Buttons [support thread]

This add-on has just been submitted to the "Free Software Add-ons"; it replaces Zen-Cart's default CSS button functionality with some CSS3 styling, based on the initial output provided by http://www.cssbuttongenerator.com/. The buttons produced have rounded corners in the more recent browsers and "fall back" to squared corners on non-CSS3 aware browsers.

I just realized that the installation instructions missed the "enabling" step! You'll need to make sure that your admin's

Configuration->Layout Settings->CSS Buttons

is set to "Yes". I'll update the readme once the initial release "hits".

Hi installed this but it doesn't render itself in IE which is a pity as it works really well. Although wasn't sure exactly what to replace in the
css when it came to the submit_button div

jagall, what version of IE? I'll grant that the submit_button hover color is "challenged" in IE and will see what I can do to improve.

I've submitted v1.0.1 to the Plugins; I believe that I've corrected the hover issue on IE.

Here's the updated zenCssButton function:

/**
 * generate CSS buttons in the current language
 * concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart
 * note: any hard-coded buttons will not be able to use this function
**/
  function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
   global $css_button_text, $css_button_opts, $template, $current_page_base, $language;
   
   $button_name = basename($image, '.gif');
   
    // automatic width setting depending on the number of characters
//    $min_width = 80; // this is the minimum button width, change the value as you like
//    $character_width = 6.5; // change this value depending on font size!
    // end settings
    // added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
//    $width = strlen(html_entity_decode($text)) * $character_width;
//    $width = (int)$width;
//    if ($width < $min_width) $width = $min_width;
//    $style = ' style="width: ' . $width . 'px;"';
    // if no secondary class is set use the image name for the sec_class
    if (empty($sec_class)) $sec_class = $button_name;
    if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
    if(!empty($parameters))$parameters = ' ' . $parameters;
    $mouse_out_class  = 'cssButton ' . $sec_class . (($type == 'submit') ? ' submit_button button' : '');
    $mouse_over_class = 'cssButtonHover ' . $sec_class . $sec_class . 'Hover';
    // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
    // (pure css hovers on non link elements do work work in every browser)
    $css_button_js .=  'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';
    
    if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
      $popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
      $tooltip = ' title="' . $popuptext . '"';
    } else {
      $tooltip = '';
    }

    if ($type == 'submit'){
// form input button
      $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
    }

    if ($type=='button'){
// link button
      $css_button .= '<span class="normal_button button"><span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span></span>'; 
    }
    return $css_button;
  }

and the updated stylesheet_css_buttons.css

/* This imageless css button is based on the button that was generated by CSSButtonGenerator.com */
.buttonRow a {
  text-decoration: none;
}
.button, input.button, input.cssButtonHover {
  -moz-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  display:inline-block;
  font-family:Verdana;
  font-size:13px;
  font-weight:bold;
  margin: 0;
  padding:3px 8px;
  text-decoration:none;
}
input.submit_button {
  background-color:#fee8b9;  /* Submit button background color */
  border: 1px solid #638263;  /* Submit button border color */
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
  margin: 0;
  padding: 3px 8px;
  color: #404040;  /* Text color for submit buttons */
}
input.submit_button:hover, input.cssButtonHover {
  background-color:#ffdc9c;  /* Hover color for the submit buttons */
  border: 1px solid #638263;  /* Submit button border color */
  cursor: pointer;
}
span.normal_button {
  background-color:#ced79c;  /* Link button background color */
  border:1px solid #638263;  /* Link button border color */
  color:#404040;  /* Text color for link-related buttons */
}
span.normal_button:hover {
  background-color:#b4bc8b;  /* Hover color for link-related buttons */
}
span.normal_button:active, span.submit_button:active, span.submit_button:active input {
  position:relative;
  top:1px;
}

These changes correct the IE submit button hover problem.

wow thank you, I haven't had chance to try this out yet but let you know the results. thanks again

The v1.0.1 update has hit the Plugins area, incorporating the changes in post #6 and updating the readme to indicate that you need to enable the CSS buttons function via your admin.

This is AWESOME and works PERFECTLY.. Does anyone have any advice on how to get CSS3 gradients to work with buttons.. the issue I have is that in IE the background color doesn't stay within the confines of the button..

    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffd3f7), color-stop(1, #fe8cd2) );
    background:-moz-linear-gradient( center top, #ffd3f7 5%, #fe8cd2 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd3f7', endColorstr='#fe8cd2');

Hello there,

This is a fantastic mod, many thanks. With the 1.1 release, I noticed in all browsers that the 'Search' , 'Continue' (on checkout) and on login seem to have a greyed out image, then the yellow button appears only on rollover. Does anyone else have the same thing? I noticed they are all submit buttons, does that have any bearing at all?

Thanks in advance.

Yeah.. you need to modify the stylesheet to set the colors to your liking..

HeathenMagic:

Hello there,

This is a fantastic mod, many thanks. With the 1.1 release, I noticed in all browsers that the 'Search' , 'Continue' (on checkout) and on login seem to have a greyed out image, then the yellow button appears only on rollover. Does anyone else have the same thing? I noticed they are all submit buttons, does that have any bearing at all?

Thanks in advance.

Like DivaVocals said, you'll need to customize the colors to match your scheme. The stylesheet_css_buttons.css file includes comments indicating where you plug the color codes for which type of button (link vs submit). FWIW, I used the contact_us page as a vehicle to testing/verifying my button colors, since there's both a link button (Back) and a submit button (er, Submit) on the page.

I haven't looked at any of the gradient-related styling yet, but will put that on the list of things to look at.

lat9:

Like DivaVocals said, you'll need to customize the colors to match your scheme. The stylesheet_css_buttons.css file includes comments indicating where you plug the color codes for which type of button (link vs submit). FWIW, I used the contact_us page as a vehicle to testing/verifying my button colors, since there's both a link button (Back) and a submit button (er, Submit) on the page.

I haven't looked at any of the gradient-related styling yet, but will put that on the list of things to look at.

Thanks for your help and Diva Vocals. Guess I am still a bit green when it comes to CSS. I will make the changes as outlined, great mod by the way. :smile:

Certainly better than the "stock" CSS buttons. Installed and worked great. readme.html was short, accurate, and to the point. Job well done.

Help!

I loaded up the CSS3 Buttons addon with great expectations after reading in the forum, but I have problems.

There appears to be buttons in front of the CSS buttons. On the shopping cart page both the Continue Shopping and Checkout buttons appear with other buttons overtop. These buttons are a different size and color.

How do I get rid of these other buttons?

Also, the css file does not validate.

What am I doing wrong and/or how do I fix this. I would like to use the buttons. the ones that do not have any overlays look great.

Dave

P.S. Here are the validation problems.

http://www.poolcuesexpress.com/store1.5/includes/templates/new1.5/css/stylesheet_css_buttons.css
6 .button, input.button, input.cssButtonHover Property -moz-box-shadow doesn't exist : inset 0 1px 0 0 #dbd8c0
7 .button, input.button, input.cssButtonHover Property -webkit-box-shadow doesn't exist : inset 0 1px 0 0 #dbd8c0
9 .button, input.button, input.cssButtonHover Property -moz-border-radius doesn't exist : 6px
10 .button, input.button, input.cssButtonHover Property -webkit-border-radius doesn't exist : 6px

The validation problems you identified are there for the older, pre-ratified versions of the box-shadow and border-radius CSS tags. If you require the CSS to validate, just remove those statements (but the buttons won't be rounded/shadowed unless the user's browser supports the "ratified" versions of the tags).

Looking at the HTML generated for your site, you're loading three CSS button stylesheets:

stylesheet_css_buttons-mod1.css, stylesheet_css_buttons-orig.css and stylesheet_css_buttons.css

If you want to keep a history file, rename it to stylesheet_css_buttons.css-mod1, stylesheet_css_buttons.css-orig, ...

That way, only the one stylesheet will actually be loaded.

Your stylesheet_css_buttons-orig.css file is "interfering" with the styling.

Hi:

Thanks. I lost my mind trying to keep track of the changes.

I took out the 4 lines of code and the buttons look right. When I use Compatibility View the buttons are square. Oh Well.

Thanks again for the quick response.

Dave

top hatt:

Hi:

Thanks. I lost my mind trying to keep track of the changes.

I took out the 4 lines of code and the buttons look right. When I use Compatibility View the buttons are square. Oh Well.

Thanks again for the quick response.

Dave

Wanted to throw in my theree cents for whatever it's worth.. The code for the pre-ratified versions of the box-shadow and border-radius CSS tags not validating is NOT a sign of any REAL issue.. Many CSS hacks won't validate (especially the browsers specific hacks) For example many of the well know hacks needed to make IE behave will NOT validate, but they are needed to make IE behave since Microsoft continues to INSIST on not following standards.. I personally prefer that the site WORK the way it should and not get hung up on the what the CSS validator says..

This guys POV sums up my feelings on CSS validation -- thought you might find it useful..:

You should not view validation (even markup validation) as the holy grail of good code. **The validator should just be a useful guide that helps you correct any actual errors that you’ve missed. **

I rarely validate my stylesheets. I will validate markup when a project is finished, but I’ll almost never validate my stylesheets. I know that CSS hacks and vendor prefixes will cause all sorts of errors and warnings to be spit out, so for that reason, I rarely bother with it.

If my CSS does what I want it to, then to me it’s valid. But occasionally I will check large stylesheets for actual errors. It’s just not something I do as habitually as markup validation.

I could use some more guidance with regards to the buttons.

I want to make the Add To Cart button larger and more pronounced. When I do that the Search button gets bigger also. I would like the Search button to stay the same size.

I want the Check Out button larger and more pronounced. The same size as the Add to Cart button. When I do that the Continue Shopping and the Shipping Estimator buttons get bigger also. I would like them to be the same size as the Search button.

I want the Previous Return Next buttons to be smaller. Right now they get bigger with the size of the Check Out button.

I someone could point me in the right direction on one of these issues I will try to figure out the rest.

I have been trying to change the css buttons stylesheet but it hasn't been working. Is that the right place or do I have to do look other places?

Dave