Contracting this selection will allow you to create another layer and fill that (do it) which leaves a nice border of the gradient fill. You can now choose another gradient like this copper one to go ahead and fill by swiping across.
Add some more spice by going to the layer effects options and creating a simple inner bevel. Now your logo/button starts to stand out some more. You can use these settings or experiment around.
Now it look's like you're getting somewhere. Create a large text layer with the number '2'. This will appear on top of the button logo.
Go to the blending options/layer effects and create a gradient overlay and add just the basic bevel and emboss (default settings).
Here are the exact settings that I used to create the effect.
If the design happens to be too wide, you can either go to Image: Image size and change it down or eyeball it with the Crop tool. Use crop to get your selected area and then press enter to apply and the entire document will snap to your new settings.
And what do you know!? Almost forgot to look at the big picture of the design and here we are. It's not that difficult at all....a gradient background, some appropriate text/typography, a nice little logo with effects and some fills and that's about it. Let the simplicity 'sink in'. It's important to always be thinking as a designer and how you can reproduce what you see in the world around you. It helps to sharpen your skills as an advanced Photoshop Designer.
More Tutorials: 
