CSS3 Buttons [support thread]

[DivaVocals]

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

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.

[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.

[HeathenMagic]

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.

[xwielder]

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

[top hatt]

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/store...ss_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

[lat9]

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.

[lat9]

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

[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

[DivaVocals]

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.

[top hatt]

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