SmokyHosts Support Forums - Webhosting and Webdesigning Support!

In this tutorial I'll show you how to make some very simple, but very stylish professional website buttons!
You can see what the buttons will come out like below in the result image:



Step 1.
Start by making a new **** for your buttons, or you can open up a website template you might have been making earlier.
The **** size I used was 304 x 120 pixels. Now fill the background with a moderately dark color/gradient, I used a gradient of #373a41 and #26282f.



Step 2.
Now let's move onto making the buttons. First, start by making a new empty layer. Now find and get out the Rounded Rectangle Tool.



Be sure you're using these or similar settings for the rounded rectangle tool:

Change your foreground color to a nice red color (#ae0d0e) then draw a rounded rectangle on the canvas.



Good job!
Step 3.
Now we need to add some nice effects to the button. Start by right-**** the layer in the layer's pallette, and going into the Blending Options.



After you're in the blending options, apply the following layer styles and **** the links for settings:

1. Drop Shadow
2. Inner Glow
3. Gradient Overlay

After applying those layer style settings you should have a nice result like this:

Step 4.
Create another new layer, name make a selection around your original button, you can do this by holding ctrl then **** the layer's thumbnail.



Using the Gradient Tool draw a white gradient from the bottom of the button to the top.



Using the Rectangular Marquee Tool, select and delete the bottom half of the gradient you just made, you might need to measure the height of your button before deleting the bottom half.



Now you'll want to change the layer mode for this layer to either Overlay or Soft Light, you'll also need to the lower the opacity to about 40-55%.

Step 4.
Now lastly, you need to add the text, of course!
Start by getting the type tool and making your text selection inside of the button. I wrote out my text with the following settings:
Tahoma, Bold, 14 pt, No Anti-Aliasing, #ffffff.



And that's all, a very simple and stylish website button! Thanks for reading, we hope you enjoyed the tutorial.



Need more help or guidence with any of the

good bro,..thanks..

nice like the glossy effect

u should have put taht in the how 2ws to make some more points

nice tut for the buttons

very nice tutorial man keep it up

thanx iSTiFYeTi
its very nice tutorial