More about the <button> element

A fol­low up to my pre­vi­ous post on the but­ton element

A little history

The but­ton ele­ment was intro­duced with HTML 4, to quote the w3c press release:

A BUTTON ele­ment whose type is “sub­mit” is very sim­ilar to an INPUT ele­ment whose type is “sub­mit”. They both cause a form to be sub­mit­ted, but the BUTTON ele­ment allows richer present­a­tional possibilities.

Why almost nobody use the button element

Two pos­sible answers, either they choose not to use it or do not know about

Choos­ing not to use the <but­ton> element

See­ing almost every browsers sup­port HTML4 and the <but­ton> ele­ment (some a little dif­fer­ently to oth­ers, see below), at least you have con­trol of how <but­ton type=“submit” > looks over <input type=“submit”> on some browsers. The only logic I can see for not using the <but­ton> ele­ment is that form cre­at­ors, do not want to con­fuse users by using but­tons that dif­fer from the default set­ting of user’s browsers. While I can see this view being sup­por­ted by the likes of Jakob Nielsen, I can not see the major­ity of web design­ers avoid­ing the oppor­tun­ity to make use of the richer present­a­tional pos­sib­il­it­ies offered by the but­ton ele­ment for styling.

Not know­ing about the <but­ton> element

I would sug­gest that most form cre­at­ors learnt about forms prior to HTML 4 or learnt (includ­ing view source) from someone who did. So the have always used <input type=“submit”> and accep­ted the lim­it­a­tions and vari­ous browser man­u­fac­tur­ers ideas on what I but­ton should look like. Well I sup­pose this is the start of a cam­paign to edu­cate form cre­at­ors there is a alternative.

Fun with Internet Explorer

In addi­tion to IE on PC adding the extra mar­gin. Another inter­est­ing fea­ture of IE on PC is unless told oth­er­wise, IE on a PC fixes the font size of the but­ton and all ele­ments con­tained within to the default font size in pixels. If you are using rel­at­ive font sizes (ie elastic design) this works fine at medium, but does not allow the but­tons to scale at dif­fer­ent set­ting. This can be resolved by adding the fol­low­ing declar­a­tion to the stylesheet: button { font-size: 1em; } .

Lozenges of Death

Well that is what one of my col­leagues referred to my pre­vi­ous efforts as. So here are another pair of but­tons, which I will be using in a forth­com­ing project.

Styl­ish Access­ible But­tons Two

Continue

Cancel

Added Decem­ber 26: Lea I did test in Safari, how­ever it was before I made the cor­rec­tions for IE on a PC, and it was then I for­got that Safari behaves like IE when you use the !import­ant hack inline. It should be fixed now.

This entry was posted on Monday, December 19th, 2005 at 11:52 pm and is filed under accessibilty, css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.