Styling Input and Anchor tags as action buttons with cross-platform support

Mark — Sun, 29 Nov 2009 16:30:38 +0000

Attempting to style inline objects consistently across multiple browsers and platforms is difficult enough with unpredictable standards support — trying to maintain that exact style across form input elements as well has been near fantasy until recently. Thankfully, with the combined knowledge of the web development community and rapid adoption of reworked web standards by modern browsers, solutions are available.

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,  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;}

withoutnations : Mark Mitchell » input elements

Styling Input and Anchor tags as action buttons with cross-platform support