ScottKing.com.au

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:

The Image used (button.png):

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:

With all the development work I don’t get much time to design these days, but for Budget Greenslips I decided to break out the Stylus and updated the design to a more modern, web 2.0(ish) design. I then rebuilt the site using strict CSS and xHTML, re-optimised for maximum SEO.

Take a look:

http://www.budgetgreenslips.com.au/

Technology:

• Photoshop
• PHP
• xHTML, CSS
• JavaScript