Step 1. Create a new image [200x200] with white background.



Step 2. Create new layer and select elliptical tool to make a circle (hold down shift to make it round) or set fixed size [I used width: 64px Height: 64px].



Step 3. Now it's time to do your color choise. The backgroundcolor must be darker than the foreground color. [For example: I used red and dark red].



Step 4. Now select the Gradient tool and select "foregorund to background" and drag from the bottom edge of the circle to the center of it.



Step 5. Then Select > Modify > Contract Contract by 5 or 3.
If your circle is as big as mine. After that, change your foreground color to white [#FFFFFF].



Step 6. Now set your Gradient tool to "Foreground to Transparent" and drag from the top of the circle to the center.



Step 7. Your picture should now look something like this, correct me if I'm wrong...


You can use this "button" for a lot of things. Here is one example I've made:


IF anything is wrong about this tutorial, please tell me! and i sure want some comments enjoy!