this question is already answered in relation to Inkscape here
"The effect you described is simply achieved by duplicating the shape, changing it to outline, moving it up a bit and putting it in the background."
So to make a shape in Photoshop; hit CTRL and U you are now on the shape tool, holding down on this icon in the tools panel a submenu will appear with alternative shapes to choose from including 'custom shape tool' which has a wide variety.
To duplicate the layer; right click on it in the layers palette and select 'duplicate'
To change it to an outline around your button; Simply alter the shade to your desired one or if you prefer a simple outline with some negative space then consider adding a stroke.
Move up slightly; Use the move tool (V) to move a selected layer, in the case you will want to have your button as the top layer and your duplicate as your bottom layer. Ensure that it is selected and hold SHIFT while moving it up to keep it aligned with the first layer.
The principle for making this in Inkscape, Illustrator or Photoshop is the same and is as described by KMSTR in the link and quote at the beginning of this answer. Though there are other methods this is probably the most straight forward one.
(I did not mark this as a duplicate as it seems from the comments on the 'duplicate' question that the OP was still having some trouble).