1

I have designed an image which will be used as a button in an android app. Since it is a button, the state of the image has to be changed when the user clicks on the image to give it a "pressed" effect.

How do you impart such an effect? Which tools should would be easy for this?

  • 1
    It's important to note that creating button effects like this in CSS/HTML can save time given you don't need to edit an image for each and every different button. – Zach Saucier Nov 14 '14 at 14:56
  • 1
    As it stands this is way to broad to be answered. You can quite literally do certainly thousands if not millions of different buttons – Ryan Nov 14 '14 at 15:38
  • I'm really surprised no-one is referencing Google's 'material design' guidelines in this, since it's for an android app. – user56reinstatemonica8 Nov 14 '14 at 15:56
  • Other than looking different than the non-pressed state, there's no specific answer to this. It all depends on the overall visual aesthetic you are using. This is just too broad of a question. – DA01 Jan 22 '15 at 1:34
7

The easiest and simplest way would be to darken the button when its pressed. Applying a 30% black layer on top will do the trick.

Sample Button mockup

5

In order to save time and allow for transitions between states, creating button effects in the styling language for whatever UI you're creating, not creating images for each one, is important. This will allow for the effect to be reused when you have different text, sizing, etc.

Take for example designing for the web or something that understands HTML/CSS:

HTML's <button> element comes with a default pressed state that darkens the inside with a shadow. It likely isn't styled as attractively as you'd like, but we can style it ourselves quite easily by using CSS' :active state.

Using a styling language, we can also transition from one state to another instead of just abruptly change.

In this demo, I show how to apply changes to background color, adding shadow, and outline while using a transition from each state. The effects themselves should be a little more fine tuned in practice, but this shows how it can be done.

To see what prefixes you need for transition (if any) look here or on caniuse).

For more complex transitions between states, sometimes an actual keyframe or JavaScript animation is required. In this case, the animation will usually be toggled and be required to finish before it can be started again.

Similar effects can be created using the same techniques if you're working on an actual Java app, iOS app, or something else, but the implementation will be different.


As for the actual styling itself, Google's material design reference for buttons gives more exact guidelines. They suggest only changing the background color for non-essential buttons, but changing the background and shadow for more essential buttons.

For non-important vital buttons that are option (ex. "Share" buttons), they recommend something similar to the following.

For more important, vital buttons, they recommend "raising" it, meaning use shadows to convey more importance.

They also recommend using transitions/animations between states and have some neat examples on the page linked above.

3

If, what you are trying to accomplish doesn't have to be flat, i would recommend you just to add an inner shadow like this

button

button pressed

If it has to be flat-design though, i recommend change of color (darker) or inversion:

enter image description here

2

This really depends on how complicated you want your button to be. A simple button can be made with just a single shape with multiple properties to represent normal and pressed states.

In Illustrator, you can check the shape properties in the Appearance panel, they are just like layers and can be shown and hidden to switch the button's states. In the figure I use two fills: a light grey one for normal, a dark grey for pressed.

button states

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.