Share This Article:

Subscribe to Kavoir:

WordPress does a great job in smoothing the user experience of the blog administration control panel. Ever wonder how they have styled all those buttons with such touchy appearance?

Well the originator is the man in blue:

button
{
	border-left: 3px double #CCCCCC;
	border-right: 3px double #999999;
	border-top: 3px double #CCCCCC;
	border-bottom: 3px double #999999;
	padding: 0.25em;
	background: #FFFFFF;
	color: #333333;
	font-weight: bold;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

Click Me!

The trick lies in the double border style which is rarely used. Attaching a background image would look good too.

Share This Article:

Subscribe to Kavoir:

You should also read:

• Let’s use Lucida Grande for a change – 13 web safe fonts revisited
• Styling an Alphabet of 26 Letters in HTML and CSS
• CSS: Double Border
• What are the Mandarin Chinese web safe fonts?
• PHP: GD Library Drawing Functions Reference