Design a Beautifully Detailed Web Button
Tutorial Details
- Program: Adobe Photoshop
- Version: CS5+
- Estimated Time: 15 minutes
Final Product What You'll Be Creating
Today we’re going back to basics with a simple, elegant, and professional button tutorial from Liam McCabe. Liam creates all sorts of great web elements, so he’s going to be a great guide through the process. If you’ve been looking for a way to spice up your designs with a uniquely styled button or UI element, look no further…
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in February of 2011.
In this tutorial I will be showing you how to design a detailed button using Photoshop. Various useful techniques are used to achieve the pixel perfect design, and it’s a fairly simple process taking no more than 15-20 minutes. The end result can be seen below. Like it? Then let’s get started!
Step 1: Getting Started
First thing you want to do is open up photoshop. Ctrl + N to bring up the new canvas window. The width and height is entirely up to you but make sure the resolution is at least 72 and the color mode is RGB 8 bit. Oh and set the Background contents to transparent. So something like this:
Step 2: Fill
Now fill the current layer by pressing Shift + F5 to bring up the fill window and from the drop down menu, select Color… and copy the hex value 141d28 into the box next to the # sign. This should fill the layer with a nice dark blue color.
Step 3: Alignment
Now when it comes to designing almost anything, it’s always a good idea to use guides to makes sure everything is nicely aligned. To add a guide slap bang down the middle of the canvas, from the top menu select view -> new guide, then select vertical and input half of whatever your width maybe, for me it’s 250px.
Step 4: Rounded Corners
Next you want to select the rounded rectangle tool (from the panel on the left) and draw a nice rectangular shape in the middle of the canvas, like so:
I set the background color of the rounded rectangle to a slightly brighter blue, hex value: 17202b. To do this you can either set the foreground color before you draw the rectangle or double click the layer thumbnail color after you’ve drawn the rectangle.
Step 5a: Layer Styling
With the basic shape drawn we are going to add some layer styling. To add styling to a layer simply double click the shape layer and a layer style window will appear. The first style to add is a drop shadow. By using a shadow with the spread value set to 100 we can give the button a 3d feel to it.
(For the following layer styles, feel free to play around with the values and use mine as guidelines)
Next style to add is an inner shadow, this will give the button even more 3d feel by adding a shine to the top of the button.
An outer glow simply closes up the top, encompassing the button.
By adding a gradient overlay we can simulate a curved surface, suggesting the shape is more of a pressable object like a button.
The final layer style is a stroke. This gives the whole shape a nice border and gives a bit more definition between the bottom of the shape and the drop shadow.
Step 5b: Gradient Border
Okay that’s the layer styling out of the way. It’s always worth spending time experimenting with the various styles, as you can achieve some very nice effects. If we take a look at our button we can see the very bottom (bottom of the drop shadow) lacks definition and is therefore a slight blur. To fix this we’ll add a nice gradient border.
The first thing to do is to set the foreground color to something around #050607. Create a new layer (ctrl + shift +n) and then hold ctrl and click the shape thumbnail. This is how you select the contents of a layer.
Done correctly and you should have a dashed line around your rounded rectangle. Now press G to select the gradient tool and drag from the middle just below the shape outwards like so:
With the shape still selected, switch back to the marquee tool by pressing M and then press up once, and then delete. Now press V which will allow you to move you newly created gradient border and position it at the bottom of the drop shadow like so:
Step 7: Further Detail
To add further detail to the button, duplicate our gradient border layer, position just above the bottom of the shape, invert by pressing ctrl + I and set the blending option to overlay. You may want to duplicate that layer also, just to brighten it up a bit.
Step 8: Radial Gradient
Now to add a radial gradient to the top of the button. Like before hold ctrl and click the layer to select the shape. Select the gradient tool (G) and set the foreground color to white. A good tip is to press D which sets the foreground color to black and the background color to white and then X to reverse the colors.
Above the selection drag from the middle outwards much like before, to get the following result:
Press ctrl + D to deselect and then set the layer to overlay.
Step 9: Text
Add some text, I chose Arial bold, size 14 smooth and add a slight drop shadow and there you have it! A wonderfully detailed button. Further detail can be added to the drop shadow section (looks a bit plain) and you can also begin to imagine how you could code this up in css with the various states to play with.
Finished!
And that’s it! I hope you enjoyed this tutorial and have fun creating some beautifully detailed buttons :)
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Liam McCabe
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is definitely going into my references bookmarks! Fantastic look at the fine details of creating a slick button! Looking forward to more tutorials like this one!
Thanks for posting this, I will have to try this now that I have CS5
Thanks Liam, great tut!
I’ve tried making myself some 3d looking buttons, but it was kind’f a disaster cuz i tried making it with the pen tool and also because i didn’t know how to set-up the inner/outer shadows
yeah … simple, but effective
You have two “Steps 5″
Fixed :) It should have been Step 5a and 5b. Thanks for the note!
Woops sorry about that, cheers Brandon for fixing :)
Positively gorgeous!
THIS IS AMMMAAZZZZINGGG!!! Bestest tutorial EVER!!! I can’t wait to implement this!
Nice tut, nice button.
I’m sorry to say, but I think that from Step 5 and on, the explanation is not good.
What points exactly, maybe I can offer my help here?
Next time I will be sure to maintain succinct explanation.
I guess it’s the same that I was wondering: is the gradient radial, linear, reversed?
Radial gradient, going from 100% to 0% opacity.
If you click on the arrow next to the gradient, you get a list of default gradients, it’s the second one.
And no its not reversed.
Hi Liam. I agree I am lost at step 5b. After the foreground colour is set, and the new layer is created, I don’t see how one can press V and move it. Where do I move it? It’s hard to see since everything is rather dark in our palette. Perhaps some images would help – like how you explained where to press and drag the gradient in Step 5. It’s a neat tutorial other wise, just wish I could understand this step…
Yes, that too.
Thank you for the tut, it is great.
Here I made it (well, just something similar)
http://bit.ly/gxeXYw
Juan, your button is really great, it looks really 3 dimensional. great work
Mmm yum!
Lovely work Juan :)
Love it, now off to create some more states. :)
Thank you very much!
Looks very minimal and beautiful :) Good tutorial
Simple, effective and polished. I much prefer this to the jellied buttons and it shows care in the creation.
This looks really neat. At first glance, the button just looks awesome, then as you go through each step you see how all the detail is created and its pretty cool seeing it come alive. I might use that technique in my next web button set.
Beautiful. Simple and easy to follow.
True, a very beautifully designed button, I enjoyed how you got most of the graphical aspect done via layer styles.
Awesome! Great detailed tutorial. Thank you
IIRC, Jeffrey Way (Nettuts+) did a tutorial on creating a very similar button in pure CSS a few months ago.
Not really, they don’t have this 3D effect since you cannot do gradients on borders (AFAIK) :/
PLUS this works with IE ;)
but i gotta tell that i only create css3 buttons now
Clean, a tad too high for my taste though, here’s one I made a while ago with a similar style.
http://bit.ly/fcwLMr (Coded version)
Awesome, nice work Sidola :)
Thanks for the lesson, I’m just learning Fireworks would the process be the same in Fireworks to make this button? Or would there be significant differences?
Awesome tut but where do I go from here?
How do I export it into my website?
Thanks,
- Kayden
cool tutorial but this can be done in many ways :) ,but this is version is much simpler
, this should be what a *quick tips should be in webdesigntuts
I hope you make more tuts about Web design interface ,
Thanks for all the wonderful comments. Be sure to expect more tutorials from me in the future :)
What do I do with the button now that I have made it, how do I put it on a web page?
How to make the button change colour when you hover on it in a page?
I like the explanation associated with each layer style applied. It’s very helpful.
This button is gorgeous. I would have appreciated a hover and active effect as a wonderful way to complement the tut – for me that’s usually the hardest part to design realistically.
How do you get the nice bright blue at the bottom of the button? I have been following the tutorial but when i do it that part is a dark blackish color and it has rounded edges and not a simple gradient line.
The rounded edges are okay, did you invert the layer by pressing ctrl + i and set the blend mode to overlay?
Very nice button!
This is more the kind of tutorials i’ve come to expect of Webdesigntuts. More pratical than theoretical. Very nice indeed. Keep up the good work!
Note: Might want to add what kind of gradient you were using in Step 5 B. I played around a little and used radial gradient using the color to transparent.
wow a “button” tutorial. Looks like you guys don’t have time for some tutorials, or this website going down to ultra beginers.
Hi Gyvulius,
We publish tutorials ranging from beginner to advanced… this one would obviously fall under the beginner/intermediate category. It’s short, focuses on some practical techniques with a bit of a twist, and it doesn’t require an hour to complete… which is probably why so many people have liked it so much already. It’s also really easy to integrate into an existing project if you just want to upgrade your navigation system or one particular button. We have plenty of more advanced tutorials already on the site and on the way, but it’d be unfair to only publish advanced stuff when so many of our readers appreciate these little quick tuts too. Thanks for your feedback though – we hear ya loud and clear on wanting some heavier tuts and we’ll have a couple of them in the next week or two ;)
Well maybe i have been too ruff :) will be waiting forward for advanced tuts from you guys!
Beautiful button, nice piece for inspiration ! :) Congrats!
I think a part is missing.. In step 5b you mention selecting a foreground color of #050607 but not what the background color should be. I don’t seem to be getting the same gradient as you with the #050607 and black as background so maybe I’m missing something..
Just nitpicking now but.. it also looks like you bump the marquee up 2px instead of 1px because your lines appear thicker.
Great tutorial though I was wondering how to make that 3D effect with a style. Thanks a bunch for sharing.
Chris
I will definitely use some of these techniques in my next project ;-)
This is probably one of the best explained tutorials Ive ever seen on a evato site. Ive lost count on how many tutorials I can’t finish because of skipped steps or not being clear.
I’ve re-read it and still found a few things I could’ve explained better, but cheers! That means a lot Hayden :)
Great. I’d love to see more tutorials about designing elements for web (buttons, interfaces, boxes etc)
Next step: do it in css?
Easy ;)
nice buttons.. love this one..
Oh and the greatest tip about your tut is to think of how everything plays into the picture, from the different textures to how all these elements affect one another…when I realized this it totally changed my perspective about painting..and still does.
Definitely a great tutorial!
Kudos! The button looks very nice; very sleek. Personally, I prefer to design my buttons with CSS, especially now with CSS 3, but it is still a great-looking button.
I would love to see more design tutorials like these, including CSS design tuts!
Simple design, beautiful and it stands out, hurray!!!!
Beautiful button Liam nice work.
Thank you everyone for the kind words =)
I Like it!!!
I’ve created the same button in fireworks :)
This is the link http://www.ludebo.com/fw/fw_btt.jpg
Very nicely done Lubedo!
Thanks! :)
This tutorial is great because it really does take you back to basics. I’ve always loved starting with buttons for a website. It gives you definition, and helps to create a color scheme, and overall layout. Very nice tutorial.
Definetly one of the best tutorials out there, you have no idea how much i struggle to come up with nice clean buttons for my sites, like everything else looks nice but my buttons are always looking somewhat cheezy lol, now with this tutorial I pretty much know what to do, I played around with it so all my buttons don’t look the same and they all look perfect, i have a better understanding on how to achieve a good professional clean button thanks to you Liam.
Very nice tutorial and a great looking button. You might convince me to switch from Fireworks yet =)
Fireworks forever! :)
With fireworks you can have the same result… http://www.ludebo.com/fw/fw_btt.jpg
Anyway… this is a great tutorial!!
And its faster!
Yes! :D
Hey Brandon, this kid has passion about this stuff. I’d like to see what other little tricks like this he picks up in the near future.
Nice tut kid.
Nce, clean and easy button! Nicely done!
Ei,
thanks,
that’s a clever and goodlooking tutorial!.
Hope for more!.
Decent tutorial for those wanting to learn the fundamentals of creating basic 3d-type elements. As others have pointed out, I would definitely add more detailed step-by-step instructions next time. It couldn’t hurt to have someone in your target audience go through it and follow specifically with what you’ve written. This type of user-testing will yield a far more illustrative and informative session and may even help you develop your own teaching skills.
FWIW – you can also specify the position of guides with percentages (50%), not just pixel values :)
Thank’s a lot for this tut.
I’ve just done it and it looks like the final product picture, I’m very happy.
Would be nice if you could explain also how to css it and make the HOVER-CLICK effect!
Geekfabric
Thanks for the tutorial. But I’m being stuck at the 5B step, where press M, Up, Del and V. Then I don’t know how to continue :(. I’m just a newbie in Photoshop. Can you help me? Thank you very much.
Nice post, Liam. I like seeing how other designers do things.
Wow! Thanks! Very cool!
It inspirired me to create a WEB version (CSS3 only)
http://jsfiddle.net/vLight/7B2Et/2/ (code)
http://jsfiddle.net/vLight/7B2Et/2/embedded/result/ (result only)
So simple and yet with an outstanding outcome!
Awesome tutorial, however I am completely lost at step 5. I just don’t get the new layer with the gradient and how you have to press V and move it somewhere. An image with the place where the new layer should be would be just great, this step is ruining it –’ Great job otherwise!
Great tutorial!! Absolutely loved it!! I was looking to learn how to make simple button..Whilst following the tutorial I experimented a little and came up with something I really love…and its all thanks to you :D
Simple and mazing tutorial…..I am gonna try it….
Love the button and an awesome tutorial, some parts could be explained a ton better, but very nice.
Lovely and great article i have read in ages..
Thanks for the tut! It would’ve been interesting for readers to mention the “Snap to pixels” option for the rounded rectangle tool. This allows you to draw crisp rectangles every time!
Pretty good look button, but I get lost at step 5b. I end up with a rectangle filled with dark gradient. I have no idea how to achieve the gradient border. I followed the tutorial three times and I can’t figure out what I do wrong.
It seems to me like something’s missing in this paragraph:
The first thing to do is to set the foreground colour to something around #050607. Create a new layer (ctrl + shift +n) and then hold ctrl and click the shape thumbnail. This is how you select the contents of a layer.
That’s exactly what I do, then I select gradient tool and apply it as it’s described, which fills the whole rectangle selection in the new layer with the gradient (not sure if it’s supposed to be like this)
In the next paragraph:
With the shape still selected, switch back to the marquee tool by pressing M and then press up once, and then delete. Now press V which will allow you to move you newly created gradient border and position it at the bottom of the drop shadow like so.
This is propably the hardest part of all, I don’t what to do at all. Why should I select marque tool, pressing and then deleting sth?
Could anyone please explain this to me in more detail. Thank you :-)
that area got me at first too…and the missing step is in the gradient control to select radial from the menu. for the other item..making the button edge..I did get lost here a bit at first because I couldnt see and then when I reversed my steps I went, OH its there. lol.
for the dino commenter, a great tutorial is worth repeating. for me, this is fresh, and yes, there is always more than one way to do the same thing. I could do this in fireworks, but I really enjoyed learning the technique for photoshop and VERY much appreciated the tool tips that were delivered painlessly throughout.
got more great things like this in the archive? do it again! Im new!
thanks again for the tut.
Are you using a pc? Because when I try to select the layer in step 5B it wants me to either rasterize the vector mask or delete it.
That’s an exerpt answer to an interesting question
Great Work!
“Now press G to select the gradient tool and drag from the middle just below the shape outwards like so:”
“With the shape still selected, switch back to the marquee tool by pressing M and then press up once, and then delete. Now press V which will allow you to move you newly created gradient border and position it at the bottom of the drop shadow like so:”
est…
this doesnt work in photoshop cs4, you cannot work on fx effects, layer is basicly locked for new effects. disappointment to the max.
Brilliant tutorial! I love the final result :)
great. ^_^
Thanks a bunch :)
What followed the dinosaur? It’s tail!
“Upload” FBI will get you ;-)
Republished by a mistake?
Still a neat button though. I also prefer using subtle effects in my designs :)
Fully intentional :) We repost a popular archive tutorial once a month. Glad you enjoyed it though (on both occasions…)
This is a really good article to be revisited!
Thanks!
Very nice ! I’ll test this as soon as I can ! Greets !
Thank you for this tut. I am new to Photoshop. I could learn many tools from this tutorial. Bookmarked.
I think it’s a very cool tutorial with a very different approach.
Nice.
this is a great tutorial!
I used to use photoshop, but then switched to fireworks several years ago. now, Im trying to get back into pshop as well and tutorials like this are very helpful.
The smart keystrokes are very helpful and a plus. only thing missing for me, is how to set the corners to a curve that I want. I can do this in fireworks, but I cant figure out how to do it in photoshop.
For example, the rectangle I redrew six times and couldnt get it to reduce the curve to look like yours. and I would have preferred a less rounded corner than I ended up with. oddly I think one has to do it with the plain rectangle tool, but dont quote me, and either way, pshop should allow the user to change the corner. its my only peeve but admittedly probably user error on my part.
anyway, Ive been in this business for over 15 years and sometimes its really hard to keep up with the ever changing software, let alone relearning new techniques. SO, thank you very much for this tut. LOVED IT!
Dizeyner
oops one more note to anyone that got caught regarding press control and the shape…Im on a mac using CS5 and so I had to use command shift I believe. coupla keystrokes were like that. always good to note if the tut is given from PC or mac perspective so we can adjust. :-)
Designing buttons and navigation is an area of my design that I am always looking to expand and improve on. This article is brilliant and will act as a constant reference for me in the future. I thought this was a great tutorial and the look of the button is fantastic. I love the use of colour and shadows which bring the button to life. I will be using and experimenting with this tutorial to see what I can create to improve my future designs. Great tutorial and I look forward to reading more from you.
Thank U
Can you tell us more about this? I’d want to find out some additional information.
Hi,
Does it possible with the CS4 version ?
Thanks.