Transparent button for reusability

[Soupy]

Is it possible to create a semi-transparent button such that when it is placed over a colored background, the button takes on the color? The button would have a bit of a 3-D raised effect so that it looks slightly rounded on its edges.

I'd like to get this functionality so that instead of creating several buttons all having different colors (could end up creating lots of them) I'd simply place the semi-transparent button over the colored area and change the area when needed. I'm thinking of using this with some HTML as follows:

<div style="background-color: red; width:30px; height: 15px;">

<img src="semitransparent_button.png" />

</div>

Now all that I'd need to do is change "red" to "green" and I've got a green button all by using a single image.

TIA.

[Ego Eram Reputo]

Hi Soupy - welcome to the forum.

Yes you can do that. There are a number of techniques, but perhaps the easiest is to create your button and then adjust the transparency of the central area.

The two simplest ways of doing this are to either remove the 'body' color of the button (i.e. Grim Color Reaper plugin), or to lower the opacity of the button body layer (press F4 & lower the opacity slider value).

The cleverest (and more difficult) way to do the job is to apply your bevelling & 3D effect to a defined selection on a transparent layer. A plugin like BolBait's Bevel Selection would be worth a look if you want to pursue this line.