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:

I’m a button!

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.