How does one create a rectangular browser button?

[rickduley]

I have been looking around in turotials but I must have missed this one. I am after a tut that shows how to create a dynamic-sized rectangular browser button. I am looking for something with a 'raised' appearance with the ability to have corresponding images for 'mouse-over' and 'clicked'.

[theonlychad]

Is this something of the sorts you are looking for? you can easily make one button then replicate it as i have shown of course you could add text and such in there but i am lazy and i am just seeing if this is what you are looking for.

[rickduley]

Thanks for the response theonlychad, but I don't think you have the concept.

Go to http://www.google.com.au/ and look at the two buttons 'Google search' and 'I'm feeling lucky'. They appear 'raised' on the screen and they 'depress' when you click on them. That's the functionality I am seeking, but a slightly more upmarket appearance would not go amiss.

It's not that I am justlooking for a gimme, but if I can learn how to make these buttons I'll have a really good insight into how to do other things I want to do.

Thanks

[theonlychad]

That would have to be done with coding as you were looking for. You will have to make the individual buttons and save them as pngs then code the page to use them accordingly.

[rickduley]

You will have to make the individual buttons ...

It is the "making" part I need to learn from this forum :wink: . The scripting part is a separate issue.

I am only asking because all the button tutorials I have seen deal with round buttons. They's look a bit odd in a vertical stack in a sidebar.

[theonlychad]

well it would be fairly straight forward to create the buttons. Here is a mini tutorial on how to make the google buttons at a larger size

well here is the mini tut for it.

step 1:

Open paint.net with canvas size of 200 x 50

step 2:

select white as your primary color and grey as your secondary

step 3:

make a linear gradient with the white fading in to grey from the top

step 4:

on a new layer add your text

step 5:

add another layer press ctrl+a and then run the outline selection plugin at 1 pixel radius.

step 6:

flatten and save as png.

for the blue one:

take the image you created in the first mini tut. The run the color tint plugin and tint it the color you want it to look like on mouse over.

[rickduley]

Thanks

I reckon I can handle that.