Discussion on Fancy 2 Line CSS Buttons

gbsmith71

gbsmith71 supports this item

Supported

15 comments found.

are these buttons really compatible with IE 6 .0?

You lose the rounded corners in ie6, but keep the layout and the gradients

Nice work on these.

Thanks for the feedback Scott.

Hi, it doesn’t work on my ie8 i only get ugly non rounded buttons :(

They look amazing! thanks ! . if only i knew how to work them out, but i’m sure i will ;-)

Thanks for the feedback. Its all in the documentation, but let me know if you get stuck.

You are sweet! yes It is all in the docs. My English is not so grand, but your files are so easy to follow. I only strugle to get the hyperlinks at it. But realy, i love this.. ( i even get a better look at css, because of your deadeasy explaining!!) Eugenie

Super Great Buttons !!!

Can it also be used as Form Submit Buttons ? If, how … Show sample code pls :)

You could use the CSS to create a single line submit button although it would not be possible to do a two line. Try this :

< input type=”submit” class=”button purple” value=”submit”/ >

Could you make this work correctly with IE8 as well?

It works in my IE8 ? What are you seeing?

We are not seeing the rounded corner effect in IE8 . All buttons show up as rectangular in IE8 .

That’’s right, IE 6 , 7, 8 do not support rounded corners.

I get this wont work in IE 6 ,7 and 8…. but if your put the Remy Sharp Shiv in your markup will that enable the rounded corners to be seen in those browsers?

Not working in IE6 / 7 / 8 / 9 !!!!!!!!!!!

IE does not support rounded corners. everything else works.

Two things:

First, how can I include an icon while using it as a form submit button?

And 2nd, what am I doing wrong in IE? Even on IE9 (64bit) I end up with square buttons (although the round corners still show over the square background and it looks awful) while viewing the included demo.html file (and I didn’t change a thing).

IE did not support border-radius until IE9 and then for some reason known only to MS, they did not make it work with their proprietary filters for gradients.

So you have two options, either remove the border-radius from the CSS (No rounded corners) or remove the filter: from the CSS (No gradients).

The joys of browser standards (or lack thereof)

Okay, I guess I got it working – is there a better way though than to just edit the main button css? I would like to just override with a line or two in the ie-only css if possible.

In IE now the text of the button isn’t centered top-to-bottom – it’s too high – but I’ll see if I can mess around with that.

Also, what about the icons for form submit buttons?

Try this link for targeting ie9: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

For a submit button you could do:

< input type=”submit” class=”button purple” value=”submit”/>

But there’s no way to add a css icon. You could do it with a background image in css.

I placed your css files into my plugin css folder and added some of your button codes onto a php page, but i just get plain text link. Please can you help or give more detailed instruction. Thanks

please email me a link to your page support@teeplates.com

Looks nice! GLWS

by
by
by
by
by
by