Nice Submit <Button>'s using CSS and Transparent Png's
This months article is going to be short and sweet. Short because the technique effused here to create nice looking graphical form submit buttons using the <button> tag and transparent png's should inspire you to experiment on your own. Sweet because this technique works fine with minimal markup in all modern browsers including IE 6 because we're going to use handy javascript that Dean Edwards came up with and is now hosted on Google's code repository. Let's get to it!
Creating the Button Graphic
This technique is easy because we are going to be using only a single .png file for our button graphic, and controlling the pseudo states via CSS, hence less moving parts. First we need to create our .png graphic. Open up Photoshop (or your favorite graphics editor) and create an new 80px wide by 24px high transparent image. On the first layer make the shape of your button (make sure anti-alias is on for your shape tool). Here I'm using any generic color and the rounded rectangle tool with a corner-radius of 3px.
Next choose a font and size to your liking and create a text layer above the button shape layer. In my example I am simply creating a layer with the word "BUTTON" in white, since this will be the background color of the html in my example.
The next step is quite easy as well, create a layer below your button shape layer and fill it with whatever the background color of your intended html is. You can see in the figure below that I have my button shape on Layer 1, so I created my 'background' layer on Layer 2, and filled it with 100% white (the background of my intended example page).
Next make your button shape layer invisible by clicking the eye icon to the left of the layer (we only need this layer for the shape itself) then Ctrl-click the button shape layer to select the outline. While this selection is highlighted click on your background layer in the layers panel to select it, and finally press Ctrl-x to delete this shape from the background layer. In essence what we have done is create a negative image of our button shape as shown below. Not much to look at I know, but the CSS is going to make the background colors for us.
Save your image in 24-bit .png format with one caveat: it must be named *-trans.png, where the * can be any name of your choice followed by a dash and then 'trans'. The reason for this is that the handy javascript we are going to be importing for IE 6 will only parse and repair transparent .png's that use this convention.
We now have our image so it's on to the basic markup and CSS
The HTML and CSS
Now come the easy part, writing the markup for our buttons. In essence what we are going to do is create a form we want a nice CSS button to be used as a submit action, instead of the usual <input type="submit" /> element. The nice thing about the under appreciated <button> tag is that it takes html as content, and you can set it's type attribute to "submit" within a form, and hence submit that form with it.
Below is all the html we will be using for this simple example, clearly this is a bare-bones example as we are interested in the button technique and not explaining all that is possible with forms:
<form> <label for="name">Name:</label><input type="text" name="name" /> <button type="submit" name="submit"><span> </span></button> </form>
As you can see the html is minimal, I have the <span> </span> markup betwen the button tags only because I hate to leave things blank, also to show that it can take anything. Next comes the CSS for this technique:
<style>
<!--
button {
/* size to your image file */
width:80px;
height:24px;
/* get rid of default 'look' */
border:none;
/* our graphic and bg color */
background:#666 url(images/button-trans.png) top left no-repeat;
}
button:hover {
background:#ff0000 url(images/button-trans.png) top left no-repeat;
/* need to fix the cursor */
cursor:pointer;
}
-->
</style>
Now clearly I'm not bothering with class names etc for this example but applying my styling directly to the <button> tag. This is acceptable given the nature of this example, obviously you would want to apply a class or id to this element in your work. Notice the simplicity of the CSS. First to the button tag we constrain it's size to the exact dimensions of our .png graphic. Then we kill the default double-border styling all browsers use for it, and finally we apply a background color and our image. For the hover pseudo state we merely change the color of the background, which will in effect change the color of our background when hovered ;P
Below is this actual technique in action:
Now the IE 6 Fix
As I mentioned in the introduction Dean Edwards has created a wonderful script that repairs on the fly Internet Explorers horrible handling of CSS bringing it up to snuff, and also repairs IE 6's mishandling of transparent .png's. As I mentioned for the .png fix to work you must name your image using the *-trans.png convention. What this script does realistically is make it so you can forget about the vast majority of IE 6 hacks when developing. Of course javascript does need to be enabled for this technique to work, but in my experience anyone who uses IE 6 wouldn't know how to disable javascript anyway so we're probably safe. To use this technique simply add the following code to the head of your document.
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
This is for the initiated an IE conditional statement which determines if the version of IE is less than IE 7, and loads the repair script if true.
As you can see this technique is quite expandable and consistent in all browsers with minimal markup. I must say that the reason we went with a background image instead of using say <button type="submit"><img src="..../button-trans.png" /></button> (in other words other than using the transparent png within the markup of the button tag) is because Firefox (yes only Firefox since v 3.0) has a bug in it's padding / margin for images tags within button tags, it can be fixed using negative margins for the position of the img tag in the markup, but I would prefer the same markup for all browsers, and not having to hack my code for a particular one. Perhaps it's Firefoxes turn to take these thing seriously.
