July-August 2009: Digg considers dropping IE6 support, YouTube begins phasing it out

15 January 2010: Microsoft admits the attacks on Google’s system by Chinese hackers permitted by a flaw in Internet Explorer

16 January 2010: The German government issues a strong recommendation for users to upgrade or switch browsers

18 January 2010: A government agency in France responsible for cyber security restates Germany’s assertion

1 March 2010: Google will begin phasing out IE6 support for Docs and Sites

end of year 2010: Google will begin phasing out IE6 support for GMail and GCal

For a recent project I had the task of applying one consistent button style to form inputs, anchor tags, and a handful of paragraph tags — with varying widths and background colors. Taking a cue from the brilliant work already posted on the Filament Group (which is derivative of the ALA sliding doors method and the work of Kevin Hale at Particletree), I developed a class that is applicable across a variety of elements. The examples given were generally applied to the button element; my project called for standard inputs with type ‘submit’. The class scope is left open to allow for easier application to non-form elements. A few instances:

<a href="#" class="input-btn-link"><span>Add to Favorites</span></a>
<a href="#" class="input-btn-link small"><span>Add to Favorites</span></a>
<input class="input-btn" type="submit" value="Add to Favorites" />
<input class="input-btn small" type="submit" value="Add to Favorites" />
<input class="input-btn medium" type="submit" value="Add to Favorites" />
<input class="input-btn large" type="submit" value="Add to Favorites" />
<p class="input-btn">Add to Favorites/p>

The complete class with options for different widths and background images. A rollover state stored within the background image and accessed through negative padding would be a simple addition (see the Filament Group post). The class works in Firefox 2+, Safari 3+, Google Chrome, and Internet Explorer 6/7/8.

Example images:

input-btn.png

input-btn-link.png

input-btn_small.png

CSS:

/*---------------------------------
input type=submit, <p> etc
---------------------------------*/
/* basic class */
.input-btn {
	margin: 0;
	padding: 0;
	float: right; /* either float or display: block */
	color: #FFF;
	font-size: 1em;
	border: none;
	cursor: pointer;
	overflow: visible;
	background: transparent url(input-btn.png) no-repeat 0 0;
	height: 25px;
	text-align: center;
	width: 265px;
	/* Firefox on the PC may need font-family redefined: */
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
input::-moz-focus-inner {
	border: none;
	}
input.input-btn:hover {text-decoration: underline;}

/* + different widths */
.input-btn.small {
	background: #FFF url(input-btn_small.png) no-repeat 0 0;
	width: 100px;
	}
.input-btn.medium {
	background: #FFF url(input-btn_medium.png) no-repeat 0 0;
	width: 150px;
	}
.input-btn.large {
	background: #FFF url(input-btn_large.png) no-repeat 0 0;
	width: 185px;
	}

The same style applied to an anchor tag, very flexible with width. Requires /span/ or similar.

/*---------------------------------
a: span
---------------------------------*/

a.input-btn-link {
	margin: 0;
	padding: 0 15px 0 0;
	display: block;
	text-align: center;
	width: 170px;
	background: transparent url(input-btn-link.png) no-repeat right -40px;
	text-decoration: none;
	}
a.input-btn-link span {
	display: block;
	margin: 0;
	padding: 5px 0 5px 12px;
	height: 15px;
	color: #FFF;
	background: transparent url(input-btn-link.png) no-repeat top left;
	font-size: 1em;
	line-height: 1.3em;
	white-space: nowrap;
	}
a.input-btn-link span:hover {text-decoration: underline;}

/* custom width */
a.input-btn-link.small {width: 100px;}
a.input-btn-link.large {width: 250px;}