The Button Element

I’ve been doing a lot of thinking about buttons lately. I’ve even gone so far as to come up with a Button Theory. I know – this is heady stuff, but don’t worry, I’ll go slow.

First things first

My Button Theory can wait for another day. The purpose of this post is to talk about the <button> element.

If you’re the type that likes to use native browser buttons, more power to you. Nothing wrong with that. But if you prefer to create images to replace the native browser buttons, then you may want to consider using <button> instead of the familiar <input> tag in your forms. Last year some time, I read an article by Particletree showing how they had “rediscovred the button element“. At the time, I instantly wanted to try it out. Alas, I am just now getting around to it.

Before I get into “why”, let me show you what I did and how I did it. I’ve replaced all my <input> tags with <button> tags in my forms. On the surface, it looks like this:

A similar button replaces my Submit buttons and the Search button (see search field in header above). The implementation was actually much easier than I anticipated. The HTML is academic:

<form>
  <button class="send" type="submit">Send Message</button>
</form>

The CSS is where you can really do some nice things. I chose to keep it simple and apply a background image and a :hover property (without Javascript), which I was able to achieve with only two style rules:

button.send {
   background: #D1E9F4 url(img/plane.png) no-repeat 5px 50%;
   color: #007CB3;
   font-weight: bold;
   font-size: 12px;
   padding: .7em 10px .7em 40px;
   border: 1px solid;
   border-color: #F1F8FC #88C3DD #88C3DD #F1F8FC;
}

button.send:hover {
   border: 1px solid;
   border-color: #88C3DD #F1F8FC #F1F8FC #88C3DD;
   color: #004767;
   text-decoration: none;
   cursor: pointer;
}

I have tested this in Safari, Firefox (both Mac and PC), Camino and Internet Explorer 6.

So, why did I bother?

I mean, the <input> tag works fine, right? Why change it up? A button is a button you say? Perhaps, but …

  • I like learning new things about HTML, so I thought it would be fun to try this out.
  • You have a wide array of styling options available, as you can put any code inside the <button> tag, such as <span>, <strong>, <em>, etc. Alex Griffioen shows an example of this flexibility.
  • It allows you to make site-wide changes to your site by updating a couple CSS rules rather than having to modify several image files.
  • From a functional standpoint, it behaves the same way as a traditional <input> tag. For example, you can tab-select to the button to give it focus, then hit the space bar to submit the form.
  • Another reason is that I feel like it helps keep things straight a little more between the CSS I have for form fields and the CSS for buttons, rather than having both of them tied to the <input> tag.

Hopefully this has been somewhat helpful for someone looking for creative inspiration regarding buttons. I also hope that someone does not find some hole in my markup or style that would render me a fraud. Of course, your mileage may vary, but let me know if you have any issues with the <button> element.

No Comments

  1. The cleaner :hover possibilities are reason enough. I’d totally forgotten about this element. Thanks for reminding me. :)

  2. Andy Knight says:

    Well, you got me. We were just talking the other day about how I preferred the default browser buttons, but honestly, I only prefer them in Safari and Camino. IE and FF buttons are functional but not overly attractive.

    My favorite reason that you mentioned for using the button tag is being able to target your CSS code to affect only the text input without affecting the style of the button too. How many times have I set a width to the input text boxes and end up with a 300 pixel wide button too. Yuck.

  3. chuck says:

    @Andy Knight: Agreed, if all browsers were consistent in how they rendered buttons and they all looked as nice as the Safari or Camino buttons, I’d be much more inclined to leave them alone.

  4. Jeff Adams says:

    Button elements are great except for one major problem. If you have a form that contains multiple buttons and use the value=”whatever” attribute to detect which button is actually pushed you’ll be out of luck. IE doesn’t pass the values of button elements at all. If you only have one button element and don’t care about the value then no problem.

  5. chuck says:

    @Jeff Adams: that is great information to know. Thank you, Internet Explorer, yet again.

  6. You could actually move the cursor declaration into the initial button.send declaration – that way IE6 and below get the benefit of it as well (as they don’t support the :hover).

    You should also specify two different cursor values: “pointer” and “hand” (IE5.x doesn’t understand one of them, I forget which one without looking it up).

    I’ve been using the button element for years now – for your basic contact form, passing the value through rarely matters.

  7. Alan says:

    Sadly, if you are in a .NET environment like I am you are forced to use “input” buttons, as it is forced upon you to use the .NET postback functionality.

    I do use the button element where possible, mostly AJAX applications that rely on the onclick event of the button to perform some actions.

    What a joy it would be to not be locked down to MS.

  8. Geof Harries says:

    Are you required to use a button inside of a form element? I ask because I’m building templates with buttons (the Learn More genre) but they’re not part of a form, just a link to another page in the site.

  9. David says:

    All good stuff Chuck. I had a ureaka moment with the button tag about 1/2 a year ago and I’ve never looked back.

    Keep promoting the good stuff

  10. Jeff Adams says:

    Oh one more thing, cursor:hand doesn’t work in firefox or safari. cursor:pointer is the same graphic and works in IE6+ and all the other browsers. If you need to accomodate IE5.x include both the cursor styles.

  11. chuck says:

    Thanks for all the comments/suggestions, everyone!

    @Jeff Adams: I updated my code (and the code above) to reflect that. Much thanks!