· ·

Create Re-Usable Button Styles in Photoshop

Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

Buttons are an extremely common design element that’s used by almost every website. Web buttons are critical for usability and navigation, and they can also be used to help direct the action of the user as you encourage them to add a product to a shopping cart, take a tour, get more information, or contact you.

Creating new buttons with the same style can be very simple by using Photoshop’s layer styles. In this post, we’ll take a quick look at how you can create your own button layer styles to save yourself some time.

You may have had situations in the past where you found yourself creating multiple buttons for a mockup and adding the same layer styles over and over again. Or you may have wanted to create a new button that matches the style of an existing button, but you can’t remember the details of the layer effects that were used. Both of these situations could be made much easier if the button effects were saved as a layer style that could be re-used at any time.

Layer styles are presets in Photoshop, like brushes, patterns, and custom shapes. Layer styles can be saved as an .asl file and then can be loaded at any time, or distributed with others working on the project.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Envato Elements Ad - Unlimited Downloads of Creative Assets
placeholderplaceholder

Creating Button Styles

Let’s start by creating a basic button in Photoshop.

Set the foreground color to #166ecc and the background color to #4495ee. Select the rounded rectangle tool with a radius of 10 pixels and draw a rectangle that is 250 pixels wide and 40 pixels high.

Create Re-Usable Button Styles in Photoshop

Double click on the shape layer in the layers palette to open the layer style options.

Double clicking on the button layer

Click on “gradient overlay” and choose a linear gradient that fades from the foreground color to the background color.

Adding a linear gradient

Click on “inner shadow” and set the color to #a3ccf8. Change the angle to 90 degrees and give it a distance and size of 2.

Adding inner shadow to the button

Next, click on “stroke” and set the color to #0c519b. Give it a 1 pixel outside stroke.

Adding a stroke to the button layer

You should now have a button that looks like this.

A preview of the button design

Double click on the shape layer in the layers palette and click on “styles”. Then click on the “new style” button to the right and give your style a name.

Saving the button layer style

Next, we’ll make a slight variation of the button to be used on hover. Double click on the layer style, go to the gradient options and check the “reverse” box to move the darker shade to the top of the button and the lighter shade to the bottom.

Reversing the gradient

Then save this style as well.

Saving the button layer style for the hover status

Re-Use the Stlye

We now have two styles that can be easily re-used whenever we want to create a button with the same style. So let’s try it out by creating a new shape, this time we’ll create one that is more rounded.

Drawing a new button shape in Photoshop

Now, to add the style all we need to do is double click on the new shape layer in the layers palette, click on styles, find the new style and click “ok”. The styles are then applied to the button and it matches the look of the other button without editing any of the specific layer style effects.

Adding the saved layer style to the button

As you can see, saving and re-using layer styles will save you time when creating multiple buttons, and you’ll be able to easily create buttons with a uniform style.

It’s a good habit to also save your layer styles as an .asl file so you can have them in a safe place or share them with others who may also be working on the same project. To do this, go to Edit > Preset Manager and select “styles” from the dropdown menu. Then select the styles that you want to save and click on “save set”.

Photoshop's preset manager

Creating More Versatile Button Stlyes

If you are going to be creating buttons that are not all the same color you can avoid using any specific colors in the layer styles, which will allow you to create buttons of various colors that still share the same styling. We’ll quickly demonstrate that here.

Set the foreground color to #9ad63e and draw a rounded rectangle.

Creating a green button

Now, instead of using a gradient that uses two different shades of green we will be using a gradient of black and white with a blend mode of linear burn.

Adding a black and white gradient

This will give us a button that looks like this.

Preview of the green button with the overlay

We can then give it an inner shadow using white and change the opacity to alter how light the shadow is (with the blend mode set to “normal”.)

Adding an inner shadow

We can also give our button a drop shadow, and we’ll end up with something like this.

Previewing the button with a drop shadow

Now, if we save this style we can re-use it to create similar buttons of other colors. All we have to do is create the shape in any color and the open the layers palette and apply the style. Here are some examples which were created using the same style.

Preview of some random button styles

If you find yourself frequently creating buttons in Photoshop, try working with layer styles and I think you’ll find that it can be a big time saver.

For more tutorials please see: