CSS Button Beautification - A guide to styling HTML button inputs with CSS

Edit 2008/10/22 - Unfortunately, during the update from the older version of WordPress, the styles do not seem to be working on this post. Some day I might change the page to use images, but I doubt I'll get to it. The code should still work, though.

A colleague of mine wanted to know how he could turn a nicely styled link into a submit button or if it was even possible. Surely you've seen all of those "buttons" out there on the interweb. If you haven't seen one, then you are missing out. As it is likely that there are some that may be confused as to what I'm talking about I'll SHOW you.

Now that we're all on the same page, I'll begin to explain how to make them match your color scheme and even add some class to your website. (CSS pun intended) Since not all inputs are buttons, we'll need a more specific way to target our button with CSS. Classes are a big part of CSS. The entire idea of a class is what it means to be "Cascading style sheets". Almost all HTML elements accept an attribute called class. Classes can be used to target groups of elements with the same style rule(s). Like I mentioned we need to target our input so that we can be sure it is a button and not maybe a text box. To apply a class to an element you would add class="classname" to your HTML element. In this case that would be the input. Here is an example.

Unless you already have a style rule for the class "MyButton1" adding the class attribute should have done nothing to your input. In order to beautify this button we need to have a little knowledge on how to use CSS. In CSS you must target an element or group of elements. CSS uses selectors to do this. A selector could be an element tag name, class, or id. Obviously the id must be an unique string. I say string because ids and classes cannot start with a number. Some browsers will style all similarly IDed elements if you have two or more. However, this is an extremely bad practice and will likely jack up any Javascript attempting to reference any such ID. Styling the element. I'm sure you want to see the meat of this article already, so here it is. We need to first ensure that we're targeting the correct element. For this we'll use a tag name selection in conjunction with the class selector. Example:

input.MyButton1 { }

The input is the tagname selector. To add selectors to each other makes the selection more specific. Classes are selected by placing a "." before the name. Classnames and IDs are case sensitive, so be careful. It is always a good idea to just assume that things ARE case sensitive, because if they aren't then it will work fine anyway. Next we address the font face size and color of our button. font declarations can be joined together in shorthand, which is my preferred method, to assign a complete font style. We will add the line:

font: normal 14px arial, helevetica, sans-serif;

'Normal' is the font-weight property value. 14px is the value of our font-size, which can be expanded to be font-size/line-height. For example: 12px/16px. Which leaves: arial, helevetica, sans-serif; our font-family declaration.

input.MyButton1 { font: normal 14px arial, helevetica, sans-serif; }

Next thing to add is our font color. To do this we'll use the color property. The value for this can come in many different styles. You can use the standardized color names. Example: blue, black, green, white, red, brown, etc. You can also use the hexadecimal code for the color. Example: "#FF0000" = red.  Alternatively you could use the RGB values. Example: rgb(###,###,###). For this example we'll use hexadecimal values.

input.MyButton1 { font: normal 14px arial, helevetica, sans-serif; color: #FF0000; }

The third item on this list is adding a background color. To add a background color we can use the background-color property of CSS.

input.MyButton1 { font: normal 14px arial, helevetica, sans-serif; color: #FF0000; background-color: #FFF; }

Notice the "#FFF". That is white. #FFF is the same as #FFFFFF. Because each of the pairs (RR|GG|BB) had the same value for each of its two characters, you can simplify it to one for each pair. However if you had a color code that had 2 pairs that had two characters which were equal, you could not use this technique. Next thing I'd like to demonstrate is the usage of the :hover pseudo class. There are a few drawbacks to using this beautiful feature. First off, IE (v.5 - v.6) will not recognize the :hover pseudo class on any element but the a tag. Luckily IE v.7 seems to be raising the bar as far as CSS support goes. IE7 participates happily with CSS standards 1 and 2, though some support is still a bit spotty and therefore will be happy with usage of the :hover pseudo class. Observe:

input.MyButton1 { font: normal 14px arial, helevetica, sans-serif; color: #FF0000; background-color: #FFF; } input.MyButton1:hover { background-color: #FDCB4D; color:#000; }

Now that you know the basics lets get really fancy.

input.MyButton1 { margin: 0; padding: 5px 3px 8px 3px; font-size: 12px; font-weight: bold; color: #4F4F4F; background:#fff url("http://www.sholsinger.com/images/menu-heading-bg.gif") no-repeat top left; text-align: center; width: 160px; border: 0; cursor: pointer; } input.MyButton1:hover { color: #0072FC; position: relative; top: -1px; left: -1px; }

Now why would someone want to do this? Because it is sexy. You can finally customize your entire website to match. most people may use the type for this sort of application. However I prefer to not use inputs as 'buttons' whenever possible.