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:
<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'
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).
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.