shifting "press" effect with links.

[orionarioch]

Hi.
I have been looking around for a few hours for the technique used to make text (or image) links shift over and downwards to create a "pressed button" type effect.
I have seen it everywhere, but of course now that I am trying to find it I can't find any examples. I'm sorry, I hope someone has some idea of what I'm talking about.

I thought it would be some type of padding effect in a:hover... but I'm not sure how to go about it without an example, and I'm not even sure if the effect is called anything in particular so I've had no luck finding info on it.

Any help is greatly appreciated.

-Ariel

[Setek]

You can make a button look through plain CSS, it's just about borders :)

a { border: 2px outset #aaa; }
a:hover { border-style: inset; }

And in something so simple as changing the border from

outset

to

inset

, you can make a button look.

In my opinion, this isn't very pretty though - I personally would rather it as an image :) Nicer raised button look/depressed button look :)

[edit]

P.S.: if you want the text to move too, you can add padding to it too:

a { padding: 2px 8px 3px 7px;
border: 2px outset #aaa; }
a:hover { padding: 3px 7px 2px 8px;
border-style: inset; }

To mimick a 'shift' in text on hover :)

[/edit]

[edited by: Setek at 3:13 am (utc) on Aug. 10, 2006]

[orionarioch]

Thank you, but I am looking for the text (or image)without borders moving downward itself. It gives the impression that the text is being pushed inward (much like the inset effect) but by shifting it down and over a pixel or two.

(I agree with you on the image over inset... I am actually looking to shift image links with the code I'm searching for, to make them appear to be pressed, but without a double image rollover.)

------------------------

That edit was it... Thank you so much, your'e wonderful.

[swa66]

background images can be set in css and can be changed in the :hover . For :hover to work in MSIE remember that you can only use it on a elements.

so it would yield something like:
.menu {background-image:up.png;...}
.menu:hover {background-image:down.png;...}

and in the html:

<a class="menu">item1</a>

sizing and positioning the whole thing can be tricky,
you could also use tricks not to display the text and only display the image etc.

There are also examples that use much more complex structures with named items and huge css files, but it all depends on how far you want to tweak it in order to chase a specific look.

Success!

[swa66]

I'd like to add (but can't edit the previous message anymore) that you can add margins or padding in there and change it between the top and bottom (or even left and right) to make it shift a few pixels.

I'm not sure about text that moves when you hover as it might feel the text evades the pointer when you try to click it.