Tired of the boring gray buttons on web forms? With a little CSS you can make your buttons look just how you like.
Most tutorials on overcoming boring buttons suggest that you use an IMG tag and use JavaScript to make the image into a submit. I have one major issue with this technique. You need a different graphic for every button, or at least one for each different caption. So, you might need a ‘Login’, ‘Search’, ‘Logout’, ‘Go Back’, and ‘Whatever you want here’. Aside from the time to build all of these buttons; they will have to be downloaded separately, adding to your bandwidth. And, what happens if you want to make your site internationally friendly and ‘Search’ needs to become ‘Suche’ for your German users? You’ll need a entirely different set of buttons.
Fortunately, CSS gives us a fairly painless fix. Look at the following two buttons.
The first button is the default for whatever browser is running. The second uses a CSS tags to style the button. The real beauty of this technique is that if you need you can do it without needing a separate image.
The trick is to use the 'background-image' CSS tag. By putting 'background-image: url(http://the.url.to/your/image);' in the style attribute for your button, it will show the image instead of the boring gray background. If, for whatever reason, you really like the image I used you can download it and use it where ever you’d like. I spent all of about 30 seconds making it in PhotoShop. But, please download it to your own server and don’t simply link to it here.
A big advantage of this is that your background image only needs to be downloaded once, assuming it is being cached. It can also be a very small little file. Look at the sample to your right. Yes, there’s a very narrow image there. It could have been one pixel wide, but I made it wider just to make it easier to get the look right and so you could see it. As is, it’s less than 1kb. Compare that with the size of separate buttons.
Anything else?
So, can we do anything else to a normal button to make it look better? Figured you’d ask :-). Here are some other CSS styled buttons and their style attributes. Keep in mind, these are fairly simple examples. You can combine CSS tags to make your buttons look pretty much however you want.
background-color: #f00;
color: red;
font-weight: bold;
font-family: Comic Sans MS, Verdana, Arial, Hevetica, sans-serif;
This attribute takes more that one font family. If the first is not found, it will go to the second and so on.
font-size: xx-large;
border: solid 4px #000;
border-right: solid 4px #000;
border-left: dashed 2px #f00;
border-top: dotted 2px #00f;
border-bottom: double 6px #0f0;
More Information
What, you still want to know more? :-) Here are a few links to help you out.
HTMLHelp.com
This is the first site I go to when I need to look up something related to HTML or CSS. It is a great resource.
DHTML and CSS for the World Wide Web: 3rd ed.
Be First to Comment