ScottKing.com.au

Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

by on Mar.29, 2009, under CSS

I had to create some compliants based CSS Custom Styled input / submit buttons for the new Sanity.com.au revamp I’m working on, it had to use progressive enhancement / graceful depredation across all browsers. This method uses a standard HTML <button> tag, pure CSS for the graphic customisation and no JavaScript. To keep things neat it uses a single image tiling across the background of the button.

This solution allows for a completely custom design to be applied to the button, while retaining the ability to use HTML text on the button itself, and the button will automatically expand or contract depending on the length of the text on the button. It will also gracefully degrade on older browsers with no CSS or JavaScirpt support.

It is also fully compatible in non-CSS and non-JavaScript enabled browsers, in this case it will simply revert to a standard HTML <button> element. Tested in Inernet Explorer 6, 7 and 8, Firefox 3, Google Chrome, Safari and Opera.

Example:

You can use any images for replacing the button, here’s an example:

buttons1 Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

The Image used (button.png):

button Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

The HTML:

<div class="buttons"><button type="submit">SUBMIT</button><span></span></div>

The CSS:

/* BUTTONS */

.buttons button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/global/button.png);
}

.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/global/button.png) top right;
}

More Examples:

buttons2 300x35 Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

css button Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

3 comments for this entry:
  1. 35+ Essential Submit Button Enhancements | tripwire magazine

    [...] Progressive Enhancement: Custom Styled CSS & HTML Input Buttons [...]

  2. 35+ Essential Submit Button Enhancements | World Wide Web

    [...] Progressive Enhancement: Custom Styled CSS & HTML Input Buttons [...]

Leave a Reply

You must be logged in to post a comment.

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...