Quick Tip: How to Make a Glossy Web Style Rounded Button
Tutorial Details
- Program: Adobe Illustrator CS4
- Difficulty: Beginner
- Estimated Completion Time: 15 mins
Final Product What You'll Be Creating
Have you ever wondered how to make a glossy web button? In this Quick Tip you will learn how to create a simple button with recessed text, in just 11 easy steps. The best thing is, once you’ve made the first one, you can make an entire set in no time!
Step 1
Use the Type Tool (T) and select a font to your liking. I’ve used Qlassik Bold, which can be downloaded for free here.
Step 2
Select the text and set the fill to "None".
Step 3
In the Appearance Palette click the Flyout menu and go to Add New Fill.
Step 4
Your text will be filled with a black fill, this fill is more robust than the default fill. Adding a new fill in this manner will allow you to add gradients to your text and have it retain the character editing properties.
Step 5
Select a gradient from the Swatches Palette to apply it to the text.
Step 6
Drag the gradient vertically with the Gradient Tool (G).
Step 7
To add an inner glow go to Effect > Stylize > Inner Glow. Select Multiply for Mode and choose a brown color so the shadow blends seamlessly with the yellow. Enter an Opacity and Blur of your choosing.
Step 8
Using the Rounded Corner Rectangle Tool draw a rectangle as shown below. Holding the up or down arrow while you draw the rectangle allows you to control the radius of the corners.
Step 9
Apply a gradient to the button. Notice that my button has an abrupt color change to simulate a highlight. You can make this by placing two points of color very close to each other in the gradient slider.
Step 10
Give your button a drop shadow by going to Effect > Stylize > Drop Shadow.
Step 11
Apply a 1pt white stroke to the button.
Final Image Preview
Position the text ontop of the button, and that’s it, your button is complete!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jonathan
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
You’re better off drawing a normal rectangle and then applying the “round corners” effect, as using the rounded corner rectangle tool can result in some rather ugly corners if you then go to resize or reshape the rectangle. Probably not too important for this particular work, but using the effect instead is a good habit to get into.
Agreed… I’ve covered both techniques in previous tuts.
Good point with the Round Corners effect.
Check out a tutorial i wrote years ago to do the text AND round corned box in one element, using the Convert To Shape effect.
The rounded box even grows to fit the text if its re-typed:
http://gautch.wordpress.com/2007/07/19/convert-to-shape-tutorial-and-freebie/
As for the CSS3 arguments below, let see you use CSS3 in print.
Thanks for bringing that up Steve. I wasn’t aware of the round corners effect which I have been in need of for a long time. I’ll finally be able to solve this problem.
Love the quick tips. Now just add CSS3 and we’re set.
Your best to head over to Nettuts for that ;)
CSS3 Buttons = http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
Can’t see the use of this tutorial, everyone uses css today to create buttons.
Which doesn’t make sense, because there not too many browsers supporting css3.
In my opinion the best way is to create the background, y-repeat it and set the hight/width, border shadow and the rounded corners in css.
But if you got only one id for this, because its any special button in your layout, i would just use this one as an image.
When I make GUI elements I can’t use CSS3, it’s all PNG based.
The biggest problem with this tutorial isn’t a lack of CSS3 or background images as people mentioned before me–it’s that the button simply sucks. It’s unattractive and looks like something an amateur would produce. I know the tutorials are free here and that you get what you pay for, but don’t publish something just for the sake of having an article for today. This is a pretty bad tutorial.
Sorry, you are right.
The button also sucks. Its beginner stuff and not helpful, not even for an quicktip or basix.
The tut covers all the steps necessary to create the effect successfully. Attractiveness is a matter of personal preference, if you don’t like it that’s fine, but I’m certain there will be others who do. It’s foolish of you to make such an overarching statement.
Jonathan, Don’t worry. Every man to his taste.
I like all of your tutorials and I have tried and downloaded mostly all of them. When I see them all I think this guy doesn’t need Vectortuts. He could start his own web site.
This tutorial gives me some helpful guidelines to where I can make my own series of buttons using my own colors and design.
Whether you like the tutorial or the artwork, using words like “sucks” with regards to someone else’s work is the very pinnacle of what I’d call amateurish. If you feel the need to harshly criticize another designer’s hard work, at least man up and link to an example of your own work ;)
Wow my comment didn’t get posted. I even linked to a tutorial that does all this in one object.
No conspiracy, you haven’t commented on VT before and your comments went into the “waiting for approval” list. When you wrote the comment I was fast asleep here in Australia ;)
Thanks! good tip!
I’ve never made a button in Illustrator… Photoshop has always been way easier, especially when making a button with a unique rollover state. What I always use Illustrator for is text: import any text as a smart object as Photoshop’s anti-aliasing options are very poor.
But lately I’ve just been using CSS.
Some people like Vector, some like Photoshop, some like CSS – we have a tuts+ site for each of these ;)
Of course. After thinking about it some more, I can imagine vector/SVG buttons having their uses in other applications besides the web.
Thanks guys for the support. I like when you all rally behind me! Makes me feel like the 50+ tuts I’ve written count for something. 8)
Its all kicking off here…Jonathan, I appreciate the work you’ve done for us Tutters.
Although Ive seen better buttons around, its still a good tutorial for beginners. Thanks
A really simple way to create an effective 3 dimensional button, which looks appealing and high quality.
You can actually create this as a completely editable button by using effects on the appearance panel (using multiple appearances on the type) so you are only using one thing, type. No need to create the box, and you can also type in what you want, the button will re-size automatically (add new fill, convert to shape, apply round corners). Makes it a lot easier to edit, and you can save the appearance.
Nice botton! I didn’t know how to fill my text with gradient. Before i was creating the text, do create outlines and then i could fill it with gradient. The bad part was that i couldn’t edit it. Thanks very much! :)
Button, button, who’s got the button? Yuz duz! A quick and doity one. Enjoyed the Tut.
That’s pretty basic, yet you explained it right Jonathan.
I don’t agree with Chris though: it’s a tutorial, people learn how they do it; you can play around with the settings to make the button/text more interesting.