CSS Button Designer

CSS Button Designer v1.01

What is this thing?

It's a nifty little widget for applying CSS styles and JavaScript mouseover actions to a simple HTML button. You can then copy and paste the code into your web page.

How do I use it?

Well, the short answer is... just start playing with it... you'll figure it out.

What's the long answer?

There are five sections... Designer, Mouseover, Code, Help and Samples. You're looking at Help.

The Designer section is for configuring the appearance of your button. You can configure all items, some items or nothing at all. Anything you don't wish to configure, leave blank. When you make a change, you can click the Make Changes button... although simply moving to another input box or hitting Enter on your keyboard will usually update your button.

The top portion of the designer is the TEST AREA. This is what your button will look like on your page. As you make changes, the test button will be updated accordingly.

To the right of the test area you can configure the test area background color and/or background image. This would be handy if your web page uses a background image or background color other than white. This information is not a part of the button code. It's just there to see what your button would look like on say, a green background... or maybe a nice red one... or maybe this groovy background image.

The Mouseover section... let's suppose you want the button to change colors when the user holds his mouse pointer over the button. Here is where you configure these items. If you don't want any mouseover action, leave everything in this section alone.

The Code section... here is where your code is generated. There are two parts... head code and button code. The <head> code goes in the head section of your web page and the button code goes where you want the button. Can't get much simpler than that ;-)

The Help section... You are here :-)

Samples... pretty self-explanatory. I should mention that when you click a sample button, that button and all of it's parameters are loaded into Designer... and anything that's currently in the Designer secion is wiped out and launched into the ether never to be seen again.

Multiple buttons

If all buttons are to look the same but display different text (value) or have different actions, you can use the same head code for all the buttons. Here is an example. It's important to note that in each the button name is different (groovybtn1, groovybtn2, groovybtn3). Also note that in the button of the State With A Really Long Name, some of the text is cut off. This is because of the width of the button was specified. Look here for the same example with the buttons auto-sizing. The point is that you should be very very careful when using multiple buttons while specifying width.

Now if you want multiple buttons AND multiple styles, you're going to need to have a head code chunk for each style in addition to multiple button codes. Here is an example. As you can see it gets a little complicated. If you can stick with one style of buttons you'll save yourself a little tedium.

Frequently Asked Questions

I can't get my image to show up! - Ever since people started making web pages, images have been getting lost. The answer is simple, but can be confusing if you're new to making web pages. If you're having repeated trouble with images not being found, let me point you here for some help. Also let me say that the EASIEST way to use images with your buttons is to have those images online somewhere and point to an absolute URL. That way you won't have to worry about where the images are in relation to the script or the page. It will work the same from everywhere. (Note for the samples I just use the image file names because the images are in the same directory as the Designer files.)

My button looks a little different between browsers! - Unfortunately, sometimes you'll have that. Since the early days of web browsers there have been some differences between how browsers render things... and plenty of sniping back and forth over which browser is rendering correctly. Fortunately it's usually only minor differences. Hopefully the differences you see are minor. As long as the buttons are presentable in those various browsers you should be good to go.

I hit the button to open a test page and saved it. When I try to open it, it's all gobbledygook! - I noticed that too. No idea why. Try this... after you open a test page, view source instead. Then save that source.

I never made a web page but I wanna make one with these cool buttons! How do I do that? - Walking before running comes to mind. First you need to know how to make a simple web page. Then some basic familiarity with forms or javascripting would be kinda nice. So, if you need help with the basics, head on over to PageTutor.com for some lessons. Then come back here and put some cool buttons in your page ;-)

How do I get the button to... - Well, can't help you with that here. A button is a tool. Think of the button a wrench. I might give you a wrench, but you'll have to figure out how to fix your car with it. When you do come up with some use for a button... and get the thing to work using a plain old ordinary button... come back here and fancy up that button!