Custom Form Buttons with Cascading StyleSheets
|
Alright, to begin with you should go read the CSS primer if you don't have any idea what you are doing. Well, actually, you don't need to go read that. You don'y need to know what you are doing. But if you want to know, then check it out.
First we will change the font properties. Let's assume the button says something like, uh, "submit query". Let's take a look at the default button, which will appear if no styles are applied to it.
That's the normal button. Now, let's switch up the font. We'll make the font WHITE. We'll also make the font ARIAL, 18 pt., and bold.
As you can see, the button got bigger. That is due to the bigger font.
Now, let's take a look at the code which produced this button.
<form><input type="submit" title="Submit" style="color: white; font-family: arial; font-size: 18pt; font-weight: bold;"></form>
That code is a form with a button and a style applied to the INPUT element. The style is simple enough to recognize (it's the "style=..." section). Obviously, you can switch up any of those styles to make the text a different color, style, font, or size. Go play around with it, just remember to wash your hands when you're done. The Border Color
Changing the border color of the button is almost as fun as changing the font! Let's take a look.
Isn't that an absolutely fabulous red border? I think it really brings out the bloodshot in your tired, computer-strained eyes, don't you? I also gave it a border width of 4 pixels.
And here's the code:
<form><input type="submit" title="Submit" style="border-color: red; border-width: 4px;"></form> Once again you can obviously change the color. You can use RGB/Hex code. And you can change the thickeness of the border.
The Button Color
Last, but certainly not least, is the color of the button itself. The part that is by default gray can be changed to any color you want. Let''s again see the normal, default button.
And now let's change the color to, hmmmm, blue.
And then let's see the code we used to change that color (it's the background color of the button we are changing):
<form><input type="submit" title="Submit" style="background-color: blue;"></form>
And as a word to the wise you can also change the background of your button to an image! Using an image as background for your form buttons will probably makes people thing you are cooler than shit. And that's why we're going to learn how to do it.
Because I am lazy and selfish I didn't feel like opening up another program and making a custom picture to use in my button. So I used an image of a bomb that I already have lying around gathering 'Net dust on my server. That's the fuse you might notice on the button. I could have made this look nicer and made this lesson better, but I didn't. But I'm sure you can imagine the possibilities!
Alrighty then, I'm outta here for today!
__________________________________________________________________________________________________________________________________ _ ______________________________ ______________________________ _ ________
copyright - contact email - slackerguides.com network