The days where forms had to be boring are definitely over. Instead, forms can and should be part of the overall design.

We are not designers, we just like pretty things (and pretty code). And we like it best if it all is functional and adds to the experience without limiting it. And while we do use jQuery for certain effects on other sites, these a pure CSS solutions.

Everything described here we are using in the comments form at the bottom of this page.

1) Dress up your Submit button (without using input type="image"): The easiest way ever

What you need:
a) an image sprite
b) a class/id to identify your submit button
c) the pseudo-class :hover

We are using a sprite (an image containing our button’s two *states*) to avoid loading another image (plus we promised not to use any JavaScript); we are simply shifting the visible part of the image when :hover is called (the user moves the mouse over the button).

We are using a blank sprite (without any text); this way we can simply assign what we want to appear *on the button* to the button’s value in our HTML code instead of having to create a variety of different images. We are NOT using the sliding doors technique (first introduced in 2003) to create variable width buttons.

Our sprite is 150×50 and will definitely accommodate the text *submit comment*:

We create a submit button, and (we like it simple) add an id with the value *submit*. If you have more submit buttons on your site, create a class for them and automatically apply the definitions to all your submit buttons. Remember: an id must be unique to the page.

The HTML:

We need some CSS:

#submit {
	border:0;
	width:150px;
	height:25px;
	color:#111111;
	font-size:11px;
	background:url("path-to-the-image-file") no-repeat 0 0;
}

What is happening here?
1: Add a selector for the previously assigned id “submit” (#submit).
2: Set the border to 0. Otherwise, your browser will display the default border around the element.
3: Set the width of the button (150px – same width as the sprite)
4: Set the height of the button (50px – 50% of the sprite’s height)
5: The color for the foreground font (the color you want the text on the button to be)
6: The font size
7: Shorthand background definitions:
Path to the sprite (url)
do not repeat the image
start displaying the image starting at 0 px from the left and 0 px from the top (You can also use “top left” instead of 0 0).

In the :hover declaration for the id “submit” (#submit) we change the foreground color (the color for the text) and tell the browser to display a different part of the image: start at 0 px from the left (same as above) and 25 px from the top:

#submit:hover {
	color:#a2eb41;
	background:url("path-to-the-image-file") no-repeat 0 -25px ;
}

Note/Disclaimer: While IE 6 will display the background image, it does not recognize Alpha transparency in PNG files. If you need to match the background-color of your element, create your sprite with a matching background.
IE 6 also does NOT recognize the :hover pseudo-class. Font color and background image do not change in IE 6. IE 7 does recognize :hover, but still doesn’t recognize :focus (which we will use in the next part).

Tags: background-image button css form forms hover submit

Date posted: Monday, March 22nd, 2010 at 1:20 pm (14 years, 9 months ago.)
Posted in: tech mix
Comments RSS Feed
Reply
Ttrackback