1

I tried using Photoshop CS6 to make this button pushed:

enter image description here

I used:

  • Inner Shadow
  • Drop Shadow

To get this result:

But this doesn't really looks pushed because of the white round arrow stays intact perhaps.

enter image description here

Is there a quick way of doing this with any kind of image or does it require some considerations?

  • 1
    Darken the reload icon just a hair - to something like #EEEEEE. – Scott Feb 7 at 20:47
  • 1
    Sometimes a simple offset is enough to sell the effect. Like .btn:active { margin-top: 2px; } or rotation...or color change – Joonas Feb 7 at 21:28
  • Where is it going to be used? a static image or part of an interactive website / application? It would make a difference. – Luciano Jul 8 at 11:22
2

If we leave out jokes such as "put a fingerprint on it" or let it have "ON" light, the possiblities are quite limited. Without an unpressed reference button only the placement under the surrounding surface is a strong enough glue. The right illusion is difficult to achieve, very easily it seems to be a disk hanging in the ceiling. See NOTE 1.

An example:

enter image description here

This is actually a screenshot from Illustrator, but it hasn't anything which isn't repeatable in Photoshop.

The button is vertically squeezed to elliptic to make an illusion it's partly behind the surface. That illusion is tried to make stronger in following ways:

  • The surface plate is partially visible in the upper side of the hole (a grey disk)
  • the button has gradient color, darker in the upper side, opposite than the surface gradient
  • a little downwards shifted darker version of the arrow just below the white arrow; this is maybe useless, but it presents extrusion, the arrow also has some thickness.
  • the arrow is shifted a little downwards, it cannot be in the middle, if a part of the button is hidden

I tried also to have a solid blue button with a pinpoint shadow at the upper edge. Here a blurred grey sickle has been inserted. It unfortunately somehow makes the wrong "hanging disk" illusion stronger. I tried to compensate it to make the apparent thickness of the arrow bigger.

enter image description here

Just to test it in Photoshop I made this:

enter image description here

Bevel&Emboss layer style is used to make

  • the thickness of the arrow and
  • glossy edge for the hole in the frontplane

This can seem complex. The PSD is available for further examination here https://www.dropbox.com/s/scalmtcxsojuvku/ButtonPressed.psd?dl=0 The link is valid in February 2019.

NOTE 1

There's other cases where the wrong illusion also has been a problem:

Adobe Illustrator: Deboss or Engrave Effect

Adobe Illustrator: Making a shape appear to be "carved" into a surface

1

You used for your button flat design, which is basically a design, that usually either uses a strong shadow with sharp contures in a 45° angle (some shadows fade away in one directen but still have the strong contures at each shadow side...) or they don't use shadow at all. Since this button is just really small it's difficult to make any shadow look reasonable (I won't say realistic, since it's not a photorealistic button ;) ).

An easy and fairly often used way to contrast the pressed button from the other is by making a darker version of it. (used: Layer style: Satin):

Layer style: satin

If you like you can maybe use a light gradient (used: gradient overlay: 45° linear burn):

gradient overlay: 45° linear burn

I tried to play a bit with the button "wall". Since you can see the wall, there is a part that you then should not be able to see on the other side. But that just looks weird (Although I have to admit that the shadow is all wrong in this. But putting it on the other side didn't make it any better):

enter image description here (this is just awful)

So I tried it more with the view on top but with the inner shadow in a 45° angle way and a bigger shadow. It doesn't look pushed in per se but still quite nice. And if you see the effect via mouse over I think it can work quite well:

enter image description here

Another top view with a gradient and conture (I used inner glow for the conture and inner shadow for the gradient) It doesn't look bad but may not fit to the flat design that well:

enter image description here

Another way to really have the push down effect while clicking or mouse over would be to give the original button a drop shadow (its more the outer button "wall") and have the original at the pressed button. Its a small detail but gives a nice effect while in motion, I imagine. (Here you have to keep in mind that the pressed button needs to be on the same baseline than the non pressed button. So the not pressed button is a little higher at the top):

enter image description here

In the end it's your decision to which you like better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.