<button> the forgotten element

Nick Cowie

http://nickcowie.com

transcript and audio (mp3 5Mb 22minutes) of the presentation.

History

Well once upon a time, there was the HTML 3 (or 3.2 depending on your view) which introduced forms including the input element and people where happy they had forms.

People quickly found the limitations of the input element, remember this is before CSS, styling was text and borders.

So people lobbied the W3C for an improved version of the input element and with HTML 4 came the button element. And the W3C said Content providers can display rich HTML in any button source:http://www.w3.org/Press/HTML4-REC

Button and Input

If you are a big believer in the input element. And nothing I say tonight changes your mind. the one thing I want you to take away from this is use type=“button” when adding javascript action to a input element.

Appearance

You can control the appearance of the button element in all browsers unlike the input element. The example is at: nickcowie.com/other/button.html

  1. no styling
  2. color:#33f; background-color: #ccf; border:3px outset #009;
  3. width: 90px; height: 50px; line-height: 50px; color:#009; border: none; background: #000 url(background.jpg) no-repeat; text-align: center;
  4. font-size: 2em; padding: 0.25em; color:#009;

Internet Explorer PC 5/5.5 and 6/7

ie 5 or 5.5 on PC ie 6 or 7 on PC

Opera 8.52 PC and Opera 9 Mac

opera 8.51 pc opera 9 mac

Opera 8.51 has a little problem aligning the image on the button, do not know why. Hard to spot if it was not for the black background.

Opera 9 on the Mac does not have that problem and has pretty funky buttons until you style them.

Firefox and Mozillia on PC, Mac or Linux

Firefox and Mozillia on PC, Mac or Linux

Gecko engine browsers are pretty consistent, very little difference between Mozillia or Firefox, or Mac, PC or Linux OS

Camino on Mac, Safari 1.3/2 on Mac

Camino 1.0 Safari 1.3 or 2.0

Of course Camino is the exception, because it uses Apple's web kit. You can control the text size and overall size of the input element. But no control over the background.

Safari is the real challenge. The text size on the input element does not even change when increase the text size. The only thing you can control is the width of the input element.

buttons are graphical richer

view source

<div class="demob">
    <button type="button">
        <img src="images/blue500.jpg" alt=""/>
        <span>
              te<em>x</em>t
        </span>
    </button>
</div>

the css

<div class="demob">

demob {font-size: 3em; position: relative; width: 5em; margin: 1em auto;}

this is just a holding container none of this has anything to do with the button, other than centring it neatly on the page.

<button >

.demob button { margin: 0; padding: 0; border: none; background: none; font-size: 1em; position: relative; }

<img src="images/blue500.jpg"/>

.demob button img { height: 2em; }

<span>

demob button span { position: absolute; top: 0; left: 0; width: 4em; text-align: center; line-height: 1.5em;}

using flash

using flash source code

Replace image tag with
<object type="application/x-shockwave-flash" data="images/button.swf">
    <param name="movie" value="images/button.swf" />
    <param name="wmode" value="transparent" />
</object>

.democ object{width: 4em; height: 4em;}

Internet Explorer unquie take on buttons

raw button as seen by ie7

Even though the button has padding set to 0, IE magically gives the button some extra padding

If you have problems with how elements behave, add a one pixel border.

Internet Explorer's extra padding

Internet Explorer from 4 to the current beta of 7 adds roughly

to each button element, this padding can not be removed.

Solution

Conditional comments is a way of feeding IE an extra stylesheet to counteract IE unique interpretation of the CSS specifications. I could give a whole presentation on conditional comments, so if you don't use them see: MSDN Library on Conditional Comments http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

When to use input instead of buttons

Credits

The End