Ladysign

Style sexy submit buttons with CSS

Difficulty:

It’s nice to style your buttons with CSS. – For anchor tags, this is easy todo, if you use the sliding doors CSS technique.
But it gets nasty when you want to style the submit button, specially if you want the same results in all modern browsers.

What I often see, is in this case, that people create the submit button via an anchor tag as well. The onsubmit action will be added dynamicly via Javascript. – Sure this works, but when people disable Javascript (and people do), you can not submit the form. – Bad accessibility.

The input type submit button is the worse button to style. But there is also a button tag, which can contain a type=submit. This button tag, can contain child tags, just as you do with an anchor tag.
Please see my solution below.

You can download the image files:
left main button image | right side button image

html:

<p>
<a class="button" href="#"><span class="right"><span class="inner">Ok</span></span></a>
</p>
<p>
<button type="submit" class="button" href="#"><span class="right"><span class="inner">Submit</span></span></button>
</p>

css:

.button {
    background: none;
    clear: both;
    cursor: pointer;
    color: #444;
    display: inline-block;
    font: normal 12px arial, sans-serif;
    overflow: hidden;
    text-decoration: none;
    whitespace: no-wrap;
}

.button .inner {
   background: transparent url(../siteimg/submit-button-img-span.gif) no-repeat scroll top left;
   float: left;
}

.button .right {
    background: transparent url('../siteimg/submit-button-img-right.gif') no-repeat scroll top right;
	float: left;
	padding: 0 18px 0 0;
}

a.button span {
	padding: 5px 0 5px 18px;
}

button.button {
	border: none;
	padding: 0;
}

button.button span {
	height: 24px;
	line-height: 24px;
	padding: 0 0 0 15px;
}

.button:active span, .button:hover span {
	color: #000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

Check my demo.