Buttons for website

Question

I need to create some buttons for a web app. However, I have no graphics/Photoshop skills at all. Is there a website/software out there that I can simply enter the text for my button and it will spit out a graphical image with those words on top?

I don't mind avoiding graphics altogether, but the links must look like a button. e.g. a box. The buttons on Stackoverflow look too plain for my tastes.

Answer 1

You could look at MyCoolButton, but styling is limited.

Answer 2

You could use Google's approach to buttons.

They are created out of HTML elements rather than being graphics. The main advantage of doing it this way is that you can create a nice looking button with any text on the fly, which is good if you have lots of buttons or lots of languages to display your site in.

Answer 3

Here are a few that I know of:

1. Buttonator
2. My cool button
3. As Button Generator

Answer 4

If you use Mac OS X, you could use Button Builder.

Also, although it's not as nice as generating your own button graphics, you could simply use the browser's default buttons:

<input type="button" value="My Button" />

Steve

Answer 5

If you don't mind getting into CSS you can generate something that looks like a winforms button:

.button {
    font:"Microsoft Sans Serif";
    font-size:small;
    background:#CCCCCC;
    border:solid;
    border-width:thin;
    border-left-color:#FFFFFF;
    border-top-color:#FFFFFF;
    border-right-color:#666666;
    border-bottom-color:#666666;
    padding-left:12px;
    padding-right:12px
}

Or this which is meant to look like a key on a keyboard:

.key {
    font:"Microsoft Sans Serif";
    font-size:small;
    color:#FFFFFF;
    background:#000000;
    border:solid;
    border-width:medium;
    border-left-color:#999999;
    border-top-color:#999999;
    border-right-color:#333333;
    border-bottom-color:#333333;
    padding-left:3px;
    padding-right:3px
}

To use it just surround the text with:

<span class="button">Button Text</span>
<span class="key">Key Text</span>

I don't think I can post an example here, but if you look here you can see it in operation.

I'll be the first to admit that they're fairly plain, but they do look something like a button ;) I'm sure a little tinkering with the CSS could give better results - particularly if you changed the colours.