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.