Create a unique web 2.0 inspired button. These buttons can be used for navbars as well as buttons throughout a website. In this tutorial I will show you how to create a unique web 2.0 button. Remember that the colors that are provided in this tutorial are just for this example, you can try a lot of diiferent colors/gradients etc and get some very unique styles.
- First of you want to create a new document (any size will do, in this example I used 164 x 50)
- Create a rounded rectangle of the color of your choice this will be the main button color. In this example I am using black which is #000000 - Set the radius to 5px on the top toolbar
- Apply the following styles
- Create another rounded rectangle, with the same radius (5px). This one will be the reflection, so it is going to be smaller and positioned at the top. I used #DEDEDE for the color of this shape.
- Next click the “Add to vector mask” button on the bottom of the layers palette.
- Press the letter D and then X this will set the forground to white and the background to black. With the Gradient Tool drag a line from the top of the small rectangle to the bottom of it, you should see something that looks like this.
- We are going to now add some text between the layer you just created and the base layer (the one we added some styling to) In this example I am using Helvetica – Medium Condensed – 14pt – Sharp We are going to be using two colors in this tutorial White (#FFFFFF) and a nice Green (#DCF414). Put the text on the right side of the button so that we can put a small image on the left side.
- Next we are going to add a small image to the left side. For this I am going to use the check mark shape that comes standard with Photoshop.
nice
Cool! it’s a big idea for the new aplications. Maybe will use that on my own site
=D
awesome button.
I’ve tried to make it but i can’t get my button to look the same when i’m at the gradient step. What are your setting for your gradient? I’ve tried playing around with it but i always end up with too much white at the top.
Good lesson! Thanks
nice button dood!
I have been looking for a well explained professional button tutorial for almost 3 months. Congratulations on a fantastic article. Many thanks; you saved my sanity…
Very nice work
Where can I find the check mark shape?
Hey, just came across your site from a Google search, and from one web designer to another…it looks good! Color scheme, attention to detail, etc. Keep up the good work.
Cool stuff, i got what i was looking for!
Hey, Hi!
You can find the check mark shape under custom shapes. Once you’ve selected the tool, move to the top and click the arrow. You should see another arrow afterwords, click on that one too. Then click “All” and scroll down near the bottom of the list of shapes and you should find the check mark.
Also @ sketchy,
You can copy his picture then use an open space, copy that and cover up his font with it. Then just put the font you want on it.
cool tuts man…keep up the great works!
Thanks, used this today! Awesome tutorial!
Nice looking buttons
pow..num tem o download???(and download??not exist???)
wow this is great
Nice… i really like your button… thank’s for the tutorial dood…
Im confused. This doesn’t work I just downloaded the trial version of Photoshop right now and tried this, its not working. Mine looking nothing like this.
Can you please explain what i do wrong
after the (Add to vector mask)
Then I use (Gradient Tool) I can not get it dark
i always end up with too much white at the top an bottom.
please help me
When you choose gradient are you sure that where it shows you your gradient colors that it is going from black to white?
yes i press D and then X
if you want to email me the PSD I can take a look at it.
admin@blogwatts.com
even if I use red to green so it becomes just a bit bright
Peter, the tutorial is a little wrong, when you get to the gradient bit it says go from the top to the bottom, it is actually from the bottom to the top, if you dont press x then its top to bottom.
[...] Web 2.0 Button – A tutorial for creating a Web 2.0-style call to action button. [...]
Nice button！
[...] Web 2.0 Button – A tutorial for creating a Web 2.0-style call to action button. [...]
Very Nice button！
Thanks for this nice tutorial dude, love it awesome. And now I know.
Glad you liked it, we should be having a lot more great tutorials very soon.
beautiful! thank you for the awesome tutorial and the great buttons. appreciated muchily
Your instructions are excellent, thanks for the work to share this.
Excellent tutorial.
Thanks for sharing.
[...] Web 2.0 Button – Web 2.0 风格的按钮 [...]
[...] Web 2.0 Button – Web 2.0 风格的按钮 [...]
Thanks you very much! Wonderful button..
[...] Web 2.0 Button – A tutorial for creating a Web 2.0-style call to action button. [...]
[...] Another Web 2.0 style buttons [...]
Great Tutorial. Massive thanks for putting it together.
Amazing tutorial and thank you for sharing
[...] botões web, botão subimeter, botão estilo boton, botão desligar, controle de volume, Mais um web 2.0, também web 2.0, fibra de carbono, profissional brilhante, 2.0 web 2.0, efeito esmalte, [...]
naturally like your website however you need to check the spelling on several of your posts. Many of them are rife with spelling issues and I in finding it very troublesome to tell the truth on the other hand I will definitely come again again.
Fantastic beat ! I would like to apprentice at the same time as you amend your site, how can i subscribe for a weblog website? The account helped me a applicable deal. I were tiny bit familiar of this your broadcast provided vibrant transparent idea
Someone necessarily help to make significantly posts I would state. This is the first time I frequented your web page and so far? I surprised with the analysis you made to create this particular publish incredible. Wonderful task!
“Web 2.0 Button” was indeed a quite excellent blog, .
Continue creating and I will continue to keep reading! Thanks for your effort ,Elsa
Hello there, simply turned into aware of your blog via Google, and located that it’s truly informative. I’m going to be careful for brussels. I’ll appreciate if you happen to proceed this in future. Many other people will likely be benefited from your writing. Cheers!
Amazing issues here. I’m very satisfied to look your post. Thank you a lot and I am looking ahead to touch you. Will you kindly drop me a e-mail?
hey there and thanks in your info ? I have definitely picked up something new from proper here. I did on the other hand experience a few technical issues using this web site, since I skilled to reload the website many occasions previous to I could get it to load properly. I have been brooding about in case your web hosting is OK? No longer that I’m complaining, but sluggish loading cases occasions will very frequently impact your placement in google and could damage your high-quality ranking if ads and marketing with Adwords. Anyway I am including this RSS to my email and can look out for a lot extra of your respective interesting content. Make sure you replace this again soon..
[...] Web 2.0 Button – A tutorial for creating a Web 2.0-style call to action button. [...]