Micro Bevel Button

Learn how to pull off this popular button style with the use of layer styles in photoshop.

Some might say that bevel buttons are so 'early 90s'. However, they are making a comeback lately. I'm going to show you how to create a micro bevel button like the one below. This techinque could also be applied to any other element on a web design.

Step 1: Create a Rounded Box

Create a new layer and select the 'Rounded Rectangle Tool'. Create a rounded box with a small radius for the corners and fill it with any colour. In this example i have used a radius of 5px.

Step 2: Add a Gradient Overlay

Now we need to apply a gradient overlay to the rounded box. So, open up your Layer Styles for the layer with the rounded box on it and click on 'Gradient Overlay'. Apply a Linear Gradient with an angle of 90 degrees. When choosing colours, make the top colour lighter then the bottom colour. In this example i have used #2EBD27 for the bottom and #6EE77C for the top.

Step 3: Add a Bevel to the Box

This is where the magic happens! With the Layer Style window still open for the rounded box layer, click on 'Bevel and Emboss' and use the following settings:

Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Up
Size: 0px
Soften: 0px
Angel: 90 degrees
Use Global Light: Yes
Altitude: 45 degrees

Step 4: Add a Stroke to the Box

The last style we need to apply to the box is a stroke. We apply a stroke to help bring out our bevel a bit more. So, in your Layer Style window for the box layer, click on 'Stroke'. You can use a Fill Type of Color if you wish, but I have found that using a gradient gives a better effect. If you use a single color for your storke, make sure its darker then your lightest colour. So use the settings below for your stroke (and change the colors to fit your needs):

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Gradient Colour (Bottom): #269A20
Gradient Colour (Top): #4FC84F
Gradient Style: Linear
Angle: 90 degrees

Bonus Step: Adding Bevel Text

Well, thats it for creating the actual button but if you would like to also add text much like the text I have above here is a step to help you. Create a new layer and add some text to it. Then open up the Layer Style window for the Text Layer and use the following settings:

Bevel and Emboss:

Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Down
Size: 0px
Soften: 0px
Angle: 90 degrees
Altitude: 90 degrees

Gradient Overlay:

Stop 1 (Bottom): #CECECE
Stop 2 (Top): #F3F3F3
Style: Linear

Done!

And there you have it, a fresh looking bevel button to be used on your website in anyway you wish. If you do find this tutorial useful and have used this effect on your site, feel free to post the link in the comments below.

You Might Also Like...

Share the Love

If you liked this post, why not share it with others?

Make money on your website, quickly and easily.

Comments

TutorialBrowser @ 28 Jun 2009 02:32:35 PM

Great tut!, you have been added to our web site

David @ 29 Jun 2009 03:28:19 AM

@TutorialBrowser Thanks for the linkage. Glad you liked the tutorial!

Josh @ 10 Jul 2009 07:56:48 AM

Nice looking button, and easy-to-follow tute. Out of interest, what font did you use?

David @ 11 Jul 2009 04:05:36 AM

@Josh Glad you liked it. The font I used is standard old Arial.

Josh @ 12 Jul 2009 01:34:06 PM

Hi David,

I have followed your instructions, and I am unable to get the same gradient overlay effect which you outlined in step 2. I am new to Photoshop, so please bear with my lack of technical expertise. Below are the steps that I carried out for step 2:

Layer -> Layer Style -> Gradient Overlay...

Blend Mode: Normal
Opacity: 100%
Gradient: #2EBD27 (bottom - where black was by default) #6EE77C (top - where white was by default)
Reverse: Unchecked
Style: Linear
Align with Layer: Checked
Angle: 90 degrees
Scale: 100%

The above procedure gives me a button that is significantly brighter (more vivid/bold green).

Any thoughts on why this is the case?

Thanks,
Josh

David @ 12 Jul 2009 02:00:24 PM

@Josh It may be the case that after I have saved these images for the web that the colours were slightly changed. I suggest moving the sliders a bit until you get the desired colours.

nadeem @ 13 Aug 2009 05:33:23 AM

real so freash look

Geoserv @ 13 Aug 2009 05:38:32 AM

Thanks for sharing the tutorial, I'm still learning PS.

S-ACE @ 5 Sep 2009 10:36:16 PM

superb tutorial people, i am gonna make this button tonight only,

thanks a lot for this
chao !

and can you please suggest some nice gradiants in blue and dark green

Chapolito @ 27 Sep 2009 05:00:24 PM

subtle effects and nice outcome, I'm liking it! thanks!

Roshan @ 21 Jun 2010 05:56:18 AM

Ultimate Tutorial in the internet.
thanks,
(3cci.in)

boo @ 29 Sep 2010 05:03:14 PM

great tutorial... cheers

David @ 24 Apr 2011 05:05:47 PM

Thanks for the tips, David. Easy to follow =)

Brianna Lyles @ 21 Feb 2012 11:32:42 AM

this was the worst tutorial that i ever used!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!>:(

mamb @ 3 Jan 2013 04:00:45 PM

After reading your tutorials I successfully create a button like as this! Thank you for sharing.

Callum Terry @ 17 Feb 2013 11:59:23 PM

Awesome job, very thorough tutorial.

mickel @ 5 Apr 2013 09:07:59 AM

that's a great button and very simple
thank you designer

Subscribe to Blog

RSS Email

Latest Blog Entries

About the Author

Hi, i'm David! I've been building websites since 1996. Through my experiences, I have gained a well-rounded knowledge of the design & development of websites. I founded Supadupa Web Design to help others learn from my experiences.

Follow @davidburleson