Loading ...
Create a stylish button to use in your website.
Hey there, today we’re gonna be doing a stylish button that you’ve probably seen quite a few times around the web now, but maybe you’re not sure on all the steps to do to create one, so here we are.
This tutorial resembles my Orb tutorial a little, and it includes my reflection tutorial.
Read my tutorial on how to save your button/images with a transparent background!
Let’s get started 
- Open up Photoshop (yes you need to open Photoshop!), create a new canvas, i used 600×500 to give myself some breathing room, you can make it smaller if you wish.
- Fill in your background with a colour your eyes are comfortable to work on, i used a grey gradient, this step is not important, you can just fill it in white.
- Create a new layer and name it Button. Grab your rounded rectangle tool and use these settings.
- Click on your canvas to bring up the shape, now right click inside the shape and select “Make Selection”. Now fill this in with white. Deselect, go to the blending options for this layer and use the following.
- You should now have something which looks pretty damn close to this!
- Now create a new layer and name it Glow. Set your foreground colour to #9fd3ff
- Grab your brush tool, select a Soft, Round brush at size 27px.
- In your layers palette, CTRL+Click on your Button layer to select it. Go on your Glow layer, and while holding shift, draw a straight line from left to right inside the selection so that you have a kind of glow at the bottom. When brushing inside the selection, you want to have about half or less of the brush inside the selection and the rest outside, like shown here:
- Deselect, and you should have something which looks like this.
- Now CTRL+Click your Button layer again, and create a new layer. Name it Highlight.
- On this new layer, fill in the selection with white. Deselect.
- Now use your rectangular marquee tool to create a selection like this.
- When you have the selection, hit the Delete key on your keyboard (You can also use Backspace, thanks Richard!). Deselect. Lower the opacity of the Highlight layer to 20%. You should have something like this.
- Now create a new Group (use the New Group icon in the layers palette). Put your three layers inside it (Button, Glow, Highlight).
- Right click on the group and select Duplicate Group. Now while having this group selected, hit CTRL+E to merge all the layers in this group. You’ll now have a single layer, move it under your first group in your layers palette.
- Go to Edit > Transform > Flip Vertical. Now move your layer to this position.
- Add a layer mask to this layer and grab your gradient tool, set your foreground to black and use these.
- Hold shift, and drag a gradient like this and let go (drag from the bottom to the top).
- You’ll now have a nice reflection. You can play around with the gradient if you want more or less of the reflection to be visible. You can also play with the layer opacity. This is what i got.
- Your button is done! But i’ll just give you the blending options i used for the text too, because i’m like that!
- I used the font Eras Bold ITC, size 15pt. You can use another font such as Arial if you don’t have this font. Type your desired text, and use these blending options.
- You now have a finished button along with a text that goes with it!
Read my tutorial on how to save your button/images with a transparent background!
Hope it can come in useful to you! Get experimenting!
thank u very much
Hi Lucas,
Thanks for posting. This was fairly easy to follow for a photoshop novice like me and my end-result button looks very cool. Just one thing, on step 13 it should say : “When you have the selection, hit *backspace* on your keyboard.” (not *delete*).
Richard (London)
Hey Alina and Richard!
Thank you very much, glad you enjoyed
Richard: Ahh, well thank you for analysing, i appreciate it, however hitting DELETE will delete what’s selected, as instructed. I’ve always used the delete key.
I just opened up Photoshop, and you’re right! Hitting BACKSPACE will indeed delete too, i actually didn’t know that! I’ll add it to the step too in case people are more familiar with backspace.
Thanks!
Hi there agin!
Weird … for me hitting the ‘delete’ button on my laptop didn’t delete the selected area. Anyways it’s only a minor detail. Otherwise, very good tutorial. I shall be looking at the others now :-).
Richard
Hey,
Ahh yeah maybe it doesn’t work on laptops! But i’ve added it to the tutorial now so we should be okay!
Thanks!
Okay just wondering but how would you implement this into the webpage?
I have the button made, it’s just putting it on the page.
nice
Well, you could do it several ways.
You can change the background colour (not the button) to the colour of the background of your webpage.
Next grab your rectangular marquee tool and draw a selection around your button (and reflection if you’ve done it), make it about 1 or 2 pixels larger than the button.
The go to image > crop.
That’ll crop it to the selection, and then you can save you button. (File >Save as for web)
If you want to have a transparent background just hide the background layer, and select it, crop it again but this time save make sure you save the file as PNG-24 in Save as for web.
If you still don’t understand i can add it to the tutorial with illustrations
I have been looking for ways of doing such buttons for quite some time now.
Thanks 4 this tutorial
Thank you, Tim
Hey cool tutorial. Better than most, photoshop generally melts my head :P. But I understood this.
Thank you very much Josh, and i’m glad you could follow it!
I’ll take note that there are some less experienced readers, and try to put up some easier tutorials, or add more details in complicated ones!
Awesome Work
thx a ton
Very welcome, Ahmed, glad it could help
One of the few tutorials i understood, normally they don’t explain how you have go to options, or other things, but this is really awesome. hope you give some more tutorials, maybe some fire effects or something (A)
Hey Niels,
Ah you know what i’m happy to hear that feedback, i think this tutorial is the one with the most explanations on the site. I usually skip out the “simple” things, because i expect people to know these things.
Let’s face it, a lot of people know how to use Photoshop well enough to know where everything is, and to get an idea of what to do when a step is briefly explained.
However, as i’ve through comments it seems that there’s a numerous amount of people who are glad of the user-friendliness of the tutorials.
So:- I will try and make my next tutorials at least as detailed as this, explaining steps thoroughly
thanks so much…
It looks to me as if you have rotated the merged layer in step 18, but you don’t mention this.
Anyways great tutorial!
Thank you for reading!
Nils! You’re absolutely correct, how could i have missed that haha!
Wow i hope people didn’t get put off by their reflections, i’ll go and edit that right now thanks!!
hey could u explain how to get just the button into an application e.g. frontpage etc without the background? Whenever i paste it in i get a white background its very annoying
cud u quickly help me even just in these comments? cheers 
Hey Josh,
It’s very simple, three steps:
1) Make sure that your background is transparent. If you created a canvas with a white background and it’s locked, create a new canvas with a transparent background. Paste your button in there.
2) Crop the canvas so that it’s just a little larger than the button (1-3pixels)
3) Make sure you save it as PNG or GIF
Yay, I did it. Thanks so much for a very clearly step by step tutorial. I don’t know anything about photoshop but I can make this button by what you showing. BTW, if you can please make tutorial on how to edit the people picture, such as adjust the color that make a person skin whiter and so on….
Once again, thank so much for sharing this with us.
Have a great day,
Alida
hey thats awesome soushi, thanks a lot !!
Thank you Alida, glad i can help out users of varying levels!
Thanks too Josh
Hi Soushi,
I’m very successful in doing the these beautiful button following your steps. However, the only problem that I got is when I save it, it save the whole thing. How do I save only the button and not include the background? Could you please post a tutor on that? I did follow what you show Josh but I can’t find anywhere that said save as PNG or GIF. I don’t understand about “crop” thing you said. Maybe that why I got the problem. Can you show me exactly how to do that crop thing so I can make the bg transparent
Thank you so much, and sorry for the trauma that I may cause
Alida
Hey Alida
Thanks for checking out the website and commenting!
I’ve created a tutorial about it now!
http://www.soushi.org/free-photoshop-tutorials/2008/10/30/transparent-backgrounds/
I am unable to understand the 11st step :(. Can you please help ?
Step 11?
Well, i take it you’ve got step 10 done so you have the button selected.
What you need to do is fill the selection in. To do this set your foreground colour to white and use the Paint Bucket tool. Just click inside the selection and it’ll fill it in.
Just want to stop by and Wishing you a Merry Christmas, and a happy and properious new year!
PS: When you have time, please post a tutorial on how to make a skin for a forum
Thanks!
Rezev
Hey thank you very much, Rezev!
I too wish you a Merry Christmas and a Happy New Year, all the best!
PS: I'll take that into consideration
Although, there are a lot of different types of forums nowadays. 
Last time i was skinning forums was when I was really into forums (notably Invision Power Board), and that was a few years ago!
So i'm not sure if you're looking for a tutorial on replacing the images to make them appear on the board, or just designing them in Photoshop
Lucas
Excellent tutorial. Thank you very much for sharing these clear, concise and easily understandable step-by-step instructions. I've bookmarked this as one of the best tutorials on shiny buttons available on the Web.
Ahh, well thank you very much, Toni!
Really am pleased that people are finding this useful and easy to follow!