Learning CSS Part 3: Styling Buttons and Forms

[Mack]

Learning CSS-Step1 The Basics
Learning CSS-Step2 Box Model and Background Images

Learning CSS
Part 3: Styling Buttons and Forms
Originally written by my friend and former co-worker: Web design by JL Design


LoVe HAte

An a tag has 4 states, and therefore 4 pseudo-selectors attached to it. a:link, a:visited, a:hover, a:active. While an a tag can be styled by just targeting a, the pseudo-selectors will style each state of the a. When using this method, it is best to keep them in the order described above, as it will not give any rendering issues or other problems. A way to remember this order is Love-Hate… LoVe HAte… :link, :visited, :hover, :active.

The Link state is the default state of the link, where it has not been clicked or hovered over..
The Visited state is the state of the link after the link has been clicked and the following page has been visited.
The Hover state is the state in which the mouse pointer hovers over the link.
The Active state is the state in which the link is active, such as clicking on a tabbed-navigation with submenus.


Link Off- and Hover-State Buttons

An a tag is an inline element, which means it can appear many times on the same line. It can have any style applied to it just like every other element. But in order for it to display with a certain width and height in a standards-compliant browser (when I say, "standards-compliant browser," I mean "any browser that is not IE6"), the display value of the a tag must change. There are 3 different values for display:

display: inline;
display: block;
display: none;

An inline value for display will change the properties of any element to display as an inline element (multiple instances on one line).
A block value for display will change the properties of any element to display as a block-level element (one instance per line).
And a display value of none will completely remove the element from the page.



The display value for an a tag must be changed to display: block in order to receive a width and height. When declaring a multiple-state button, it is best to create all instances of the button's background image in one image (see example) and then change the background's positioning. In this example, it would be:

a:link { background: url(images/button_bg.jpg) no-repeat 0 0; }
a:visited { background: url(images/button_bg.jpg) no-repeat 0 -50px; }
a:hover { background: url(images/button_bg.jpg) no-repeat 0 -100px; }
a:active { background: url(images/button_bg.jpg) no-repeat 0 -150px; }

A button's required styling will change when there is text and when there is no text. When there is no text, the width and height are required. Some issues may arise in some browsers with this process, in which case some padding and a non-breaking space (<a href="#"> </a>) may be required. When there is text, height can be eliminated and padding will be needed to reveal the background image vertically.


Form Styling

By default, all elements in a form are inline elements, except a fieldset (almost like a div for forms). So because form elements are inline, they all appear on one line, and since a form is almost always vertical, you want to change the elements to display:block, placing each element on its own line. An input field can have its background color changed, it can have a background image, anything you can do with css, can be done on input elements...after placing display: block as a style, think of them as tiny divs from that point on.

Like an a tag-based button, a submit button can also have a background and hover states applied. A submit button will need a display: block, width, border: none, and padding. To achieve a link-effect, a submit button can also receive a :hover pseudo-selector and cursor: pointer, such as below:

input.submitButton { display: block; border: none; width: 150px; padding: 15px 0; text-align: center; background: url(images/button_bg.jpg) no-repeat 0 0; }
input:hover.submitButton { background: url(images/button_bg.jpg) no-repeat 0 -50px; cursor: pointer;}

This effect will be shown correctly in standards-compliant browsers. It will not work, only showing the normal state of the input button and cursor, in IE6, surprise surprise.

[jeela]

very helpful thanks

[jontywagener]

hmmm, cool