Input buttons and CSS3

Mark — Sun, 31 Oct 2010 11:16:01 +0000

CSS3 brings a wealth of new properties to the web and to modern browsers. There is a greatly reduced dependency on images in creating rich, stylized content. I’ve used a few of these new properties to render the submit buttons throughout this site. It’s a basic solution to a common request that was previously only possible with imagery.

form input {
	position: relative;
	margin: 0;
	padding: 0 10px;
	width: auto;
	height: 25px;
	cursor: pointer;
	border: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #3E9EEF;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.5, rgb(62,159,239)),
	    color-stop(0.5, rgb(75,177,241))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(62,159,239) 50%,
	    rgb(75,177,241) 50%
	);
}

-webkit-border-radius is only necessary if you are either targeting older versions of Safari and Chrome, or need to support the iPad until the release of iOS 4.2. background-color is a fallback for Internet Explorer. IE9 will be the first version of that browser to support these properties.

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 » HTML

Input buttons and CSS3

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

HTML5 in the News