Create the look of an input button with JUST css

This popped into my head the other day, and I immediately knew how simple it could be.

By using this CSS, you can turn anything with the class "box" into a buttons, like the buttons to reply with the quick reply below.

If you use this on an 'a' tag, when you click on it, it will still look like a button. Although you should add a text-decoration: none; to the .box class.

Have fun!

.box {
	font-family: arial;
	font-size: 12px;
        color: #000;
	background: #f1f1f1;
	padding: 2px;

	border-top: 2px solid #f1f1f1;
	border-left: 2px solid #f1f1f1;
	border-right: 2px solid #808080;
	border-bottom: 2px solid #808080;
}

.box:active {
	border-top: 2px solid #808080;
	border-left: 2px solid #808080;
	border-right: 2px solid #f1f1f1;
	border-bottom: 2px solid #f1f1f1;
}

Code (markup):

 

I'd change that active state's selector to this:

.box:hover, .box:active, .box:focus

Code (markup):

Then style normally. Of course, IE 6 and earlier won't support it on non-anchor elements without using a .htc file or other script.

 

I'd also do some property condensing, include fallback families on the font-family, and darken up the colors a touch... and swap the property order to dimensions, font, colors then border.

.box {
	padding:2px;
	font:normal 12px/14px arial,helvetica,sans-serif;
	color:#000;
	background:#DDD;
	border:2px solid;
	border-color:#EEE #888 #888 #EEE;
}

.box:active
.box:focus,
.box:hover {
	border-color:#888 #EEE #EEE #888;
}

Code (markup):