where's the salt?

03/22
2010

Dress up your forms (pure CSS submit button) (18,494 views)


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*:
Submit sprite

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:

Date posted: Monday, March 22nd, 2010 at 1:20 pm (6 years, 11 months ago.)
Posted in: tech mix
Comments RSS Feed Comments RSS Feed
Reply
Ttrackback
Print This Post Print This Post
About the author:

Nina Khoury is a software engineer, self-described geek and EVP of ninanet site solutions. She founded one of the first online agencies in Austria in 1997, taught at various universities for seven years and now lives in Sin City - Las Vegas, NV.

4 Responses to “Dress up your forms (pure CSS submit button)”

  1. 1

    […] we are using almost the same method as in the first part of the series, Dressing up your Submit button in which we use the :hover pseudo-class to change the background image for the submit button when […]

    Dress up your forms (pure CSS color-changing rounded corner input fields) on March 24th, 2010 at 7:41 am
  2. 2

    What a great resource!

    cna training on March 30th, 2010 at 11:30 pm
  3. 3

    nice post. thanks.

    forex robot on April 9th, 2010 at 8:54 pm
  4. 4

    That’s what I have been looking for. Thanks for it!

    falcana on June 8th, 2011 at 12:07 am

Leave a Reply


search

Categories