Hey guys!
How can I create an effect in Gimp which would make a shape look pressed down, like a button.
Here is my button template:


Applying a light effect or simply making it darker doesn't really look very nice... :/
I'd also like to make the corners a bit rounder if it's not too hard.

I'm also open for html/css solutions.

I hope you can help me out.
Thanks in advance. :)

You could try this effect...

A couple of quick ones.
1. G'MIC plug-in | Lights and shadows | Dodge and burn
2. Filters | Map | Map Object (defaults)



Adjust the lighting to your purpose.

You could also just go with simple CSS border-style (double, groove, ridge or inset, outset).
{
border-width:5px;
border-style:groove;
}

An interesting question, and one I've had lots of chance to practice solving recently.

There's several ways to accomplish this, it all depends on what kind of button you want to make. What's the surface like, grungy? Smooth? Shiny? Plasticky? What's the light direction? If you're making buttons for a UI (which is likely...), you'll want the light source to be consistent accross all lighting elements. Most of the time you can pretty much get away with using the "standard light direction", which is diagonally from the top left corner. It's pretty much standard in UI design.

Anyway... in order for the button metaphor to make sense, your button should have some kind of 3d-effect going on, otherwise it's just a clickable UI element and you can pretty much just forget "pressed down" and have the clicked state be just whatever looks good, like maybe a colour/lightness change.

If you want to go with a 3d-style button thing, I think you can start with a bevel on the edges. Keep it subtle, too strong beveling looks cheesy and cheap. Add a linear gradient, it'll look more stylish than a radial one. Then for the pressed down version, make the shadow of the bevel stronger, and the light weaker, add some shading overlay that makes the overall colour very slightly darker. If you want to be fancy, make the overlay also a gradient, so that the top part is darkened more than the bottom. This increases the 3d-effect.

A nice additional touch: make the text/images in the button go 1px down when pressed. That does wonders for the "pressed down" effect. Easy to do in CSS with the "padding" property.

Example imagery:

"Pressed down" can mean so many things. Not certain specifically what effect you're looking to achieve.
Here are a couple of quick concepts.

This is actually my video! Unfortunately, i cannot post external links, but I have made an updated version of this. If you would like, I can make an even better version of this if you are still interested. I could also show how to easily do it in just a few lines of CSS if interested. I know this thread is a bit old but if the interest is there I can deliver.

Go for it Wyrlor.