Make a Simple and Modern Web UI Button in Photoshop

Preview

View Demo

Step 1: Create the Photoshop Document

Our button will be exactly 170px wide and 50px tall, but we’ll make a bigger canvas (600x600px) so that we have some breathing room while we work (then we can just crop our work before saving it).

Create the Photoshop Document

Step 2: Create the Base Shape

Use the Rounded Rectangle Tool (U) set to Shape Layers and with a Radius of 5px to create a 170x50px rectangle.

Create the Photoshop Document

Step 3: Give the Base Shape a Layer Style

The appearance of the button will largely depend on its layer style. Doing it this way offers us flexibility for later when we want to change certain aspects of the button’s design, such as its color. In the Layers Panel, double-click the base shape layer to open the Layer Style dialog window.

Give the Base Shape a Layer Style

We will give this layer two layer effects: a Gradient Overlay and a Stroke. That’s it.

Gradient Overlay

  • Color Stop #1 – Color: #2877ac, Location: 0%
  • Color Midpoint #1 – Location: 40%
  • Color Stop #2 – Color: #87bfe6, Location: 95%
  • Color Midpoint #2 – Location: 40%
  • Color Stop #3 – Color: #c2def1, Location: 100%

Gradient Overlay

Stroke

For the Stroke layer effect, we will use the darkest blue (#2877ac) that we used from the Gradient Overlay, which will create this nice blending at the bottom of the button.

Step 4: Giving the Button a Diagonal Line Pattern

We’ll give the button a diagonal line pattern. We’ll create the Photoshop pattern from scratch. To start, create a new 4x4px Photoshop document (Ctrl/Cmd + N).

Giving the Button a Diagonal Line Pattern

Use the Zoom Tool (Z) to zoom in close (4x4px is very hard to see without zooming in). Create a new layer and delete the default white Background layer.

Giving the Button a Diagonal Line Pattern

Use the Pencil Tool in the Tools Panel to draw a white diagonal line from the top-left corner to the bottom-right corner of the canvas–hold down Shift to create a perfectly straight line.

Giving the Button a Diagonal Line Pattern

Go to Edit > Define Pattern to save our diagonal line as a pattern.

Switch back to our main document. In the Layers Panel, Ctrl/Cmd + click on the Vector mask thumbnail of the Base Shape layer to load a selection around the shape of the button (choosing Select > Load Selection does the same thing).

Create a new layer on top of the base shape layer for our diagonal line pattern. Make sure that you keep the selection active. Fill the selected area with the pattern we created by going to Edit > Fill and choosing it in the Custom Pattern dropdown menu.

Giving the Button a Diagonal Line Pattern

We want to trim the edges of the diagonal pattern by 2px so that it’s not covering up the stroke and the thin horizontal highlight color on top (which comes from the Gradient Overlay). Choose Select > Modify, enter 2px for the Contract By option, invert your selection (Select > Inverse), make sure you’re still on the diagonal pattern layer, and then just hit Delete to remove the selected area.

We want the lines to be subtle, so let’s switch the Blend Mode of the diagonal line pattern layer to Soft Light and reduce the layer’s Opacity to 20%.

Step 5: Add the Text

Use the Horizontal Type Tool (T) to type the text of the button; I used Museo Slab 500 at 24pt with the text color set to white (#ffffff).

Add the Text

In the Layers Panel, double-click on the text layer to open up the Layer Style dialog window. Give it a drop shadow and set the color of the drop shadow to the darkest blue of our button (#2877ac).

Add the Text

Step 6: Add an Arrow

To denote an action (perhaps to symbolize moving forward or go to the Buy Now web page), let’s add a simple icon on the button. We’ll take a quick shortcut here: We’ll use a custom shape that comes with Photoshop, instead of drawing it ourselves. Switch to the Custom Shape Tool (U) and, in the Options Bar, find the Arrow 2 shape in the Shape dropdown menu.

Add a Left Arrow

Draw the shape on the right side of the button; the dimension is 13x13px, which matches the height of the lowercase characters of our text.

Add a Left Arrow

Use the Move Tool (V) to make the necessary adjustments so that the text and arrow are horizontally and vertically centered within the button.

Add a Left Arrow

Step 7: Create the Hover State

Our button is done. However, we should create the design for the hover state of the button (i.e. how the button will look when the user hovers over it with their mouse).

Place all the layers–except the background–in a layer group by selecting them in the Layers Panel and then pressing Ctrl/Cmd + G (or choosing Layer > Group Layers).

Create the Hover State

Duplicate the layer group, then move the duplicate layer group’s content right below the original button.

Create the Hover State

Double-click the base shape layer copy (it’s inside the hover layer group) to open up the Layer Style dialog window. Modify the Gradient Overlay layer effect so that the gradient appears to be reversed. Checking the Reverse option could work for you, but I prefer manually tweaking the gradient’s color stops for better results.

  • Color Stop #1 – Color: #87bfe6, Location: 0%
  • Midpoint #1 – Location: 40%
  • Color Stop #2 – Color: #2877ac, Location: 95%
  • Midpoint #2 – Location: 40%
  • Color Stop #3 – Color: #4c9fd7, Location: 100%

Create the Hover State

Create the Hover State

Step 8: Cropping and Saving

Create a selection around the two buttons using the Rectangular Marquee Tool (U); it must be precisely 170x100px because we will use these values in our CSS. What we’re creating here is called a CSS sprite; head over to my friend Chris Coyier’s tutorial on CSS sprites to learn more about them.

Cropping and Saving

Once selected, go to Image > Crop.

Toggle off the visibility of the Background layer.

Go to File > Save for Web & Devices, choose PNG-8 with the Transparency option checked, then save it in the same folder/directory that you will be placing your HTML document into (in the next step). Save it as web_button.png.

Cropping and Saving

Step 9: HTML

Create an HTML document (perhaps named web_button.html) in the same folder/directory as your web button.

HTML

Open the HTML document in your favorite source code editor (even if it’s just your operating system’s default text editor, like Microsoft Notepad).

The web button will be a link (<a>) with an id attribute of web_button. Place the following code inside your HTML document.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Button</title>
</head>
<body>
<a id="web_button" href="">Buy Now</a>
</body>
</html>

Preview the HTML document in a web browser; it will look pretty boring.

Step 10: CSS

Let’s style the #web_button hyperlink so that it uses web_button.png as its background.

Note: The best practice for CSS is that it should be in an external style sheet, referenced using the <link> tag. But for the purpose of this tutorial, we will declare our styles inside <style> tags in our HTML document since having an external style sheet for one element seems like overkill. Please follow best practices if you are using this in production; just add the style rules to your website’s main CSS file.

The explanation of how the CSS works is inline as comments. Please read the comments to see how the CSS works.

<style type="text/css">
#web_button {
    display: block;
    width: 170px;
    height: 50px;
    background: url(web_button.png) no-repeat 0 0;
    /* Hide "Buy now" text by moving it beyond
     * the browser viewport */
    text-indent: -9999px;
    /* Because of the outline:none property, we must visually style
     * the :focus pseudo-class for keyboard users */
    outline: none;
}
/* :hover and :focus have the same style property */
a:hover#web_button, a:focus#web_button {
    /* -50px for the y-axis value of the background-position property
     * places the background on the bottom-half of the CSS sprite */
    background: url(web_button.png) no-repeat 0 -50px;
}
</style>

Preview the HTML document in a web browser, and check to make sure the :focus CSS pseudo-class has a visual representation; do this by pressing Tab repeatedly in your keyboard to navigate to the button, and making sure that it changes to our hover state when you are on the button.

Tutorial Summary

This tutorial showed you a quick and easy method for creating a flexible web UI button in Photoshop in a popular style that you see in many modern-themed websites and user interfaces. Experiment with the colors, gradients, and pattern to come up with a look that’s entirely your own.

Please post a link to your work in the comments and include it in our Flickr group — we would all love to see it!

View Demo

Download Source Files

  • Will be great if in next tutorial you show how to do that in css3

  • Wouldn’t it be better to use background-position for the :hover state?

    BTW, I know it’s supossed to be oriented to beginners but, why using images for text? Also, the stripped bg looks too much “2.0” (in not a possitive meaning :-P)

  • Using background-position: 0 -50px; to just change the position of the CSS sprite is a good idea–terser code. Saves you from having to redeclare the url value for the background-image property and background-repeat. I can’t remember why I did it this way; could be a subconscious decision based on an experience with a browser (or situation) that didn’t allow me to inherit style properties to pseudo-classes when it’s assigned using just an ID selector. In any event, it works, and as long as the sprite doesn’t get downloaded twice because of the redeclaration (it doesn’t), it’s fine. Is 11 bytes really going to kill you? Is 11 bytes not worth the benefit of added fault-tolerance? There wouldn’t even been a discernible difference when you calculate size on disk. In terms of performance, the bottleneck will be in the way you write selectors; so much so that I haven’t read anything about efficient CSS and style properties; the focus is on the performance of your selectors (e.g. not using universal selector, don’t overqualify your selectors, etc.).

    And, in terms of the outcome: this is a tutorial site, we focus on the techniques. If you have constructive comments about the techniques, let us have it. Design Aesthetics is in the eyes of the beholder; if you don’t like the outcome, change it, then post your version here in the comments or in our Flickr group.

    Edit: And to answer your question about using image for text. Is it really worth the performance hit of serving Museo Slab 500 as a web font for one button using @font-face (and even if you chose the inefficient way, I’m not even sure what the license/ToU of this font is for @font-face)? If your beef is with web accessibility (for screen-readers?), it’s still accessible to screen-readers.

  • nice article.. thanks!

  • Here’s a CSS3 tutorial for a rounded-corner button with gradients, on our other site (Six Revisions): Create a CSS3 Call to Action Button.

    You’ll have to modify the dimension properties and if you’re really set on using Museo Slab, you’d have to serve it using @font-face, and the diagonal lines can be tricky to recreate in CSS3 (but not impossible).

    There probably will not be a CSS3 follow-up to this. There could be a similar tutorial in the future that uses CSS3, but we’re probably not going to post a follow-up to this one.

  • Luca Valinotti

    the images and the links are broken!

  • nush

    Cool. So where’s all the pictures? None appears.

  • Great tutorial I was trying to remember how to do this for a logo it’s been a longtime.

  • Could you let me know if it’s still broken for you?

  • Please let me know if it’s still broken for you. I am looking at it now, and it seems to be working.

  • nush

    Yup. Still broken.

  • What browser are you using? Could you do me a favor and see if refreshing the web browser works, or if closing the browser works? There was another report about missing images earlier.

  • I just want to say that the lighting is not consistent. In Step 3, the Gradient Overlay angle is 90 degree, in Drop Shadow the angle is 120 degree.

    I’m not a web designer, I can’t say that this is a mistake. What do you think about this?

  • nush

    Chrome 8 here. Same story on FF 3.6. I’ve also tried the images in a separate tab. “http://cdn.designinstruct.com” is nowhere to be found. Or so they say (the browsers).

  • Good eye, and you’re right (and you don’t need to be a web designer to spot that mistake; in fact, a web designer would probably make that mistake more than a digital artist). My original mock-up (first run), actually had both 90-degree angles for the gradient and the drop shadow on the text. http://min.us/mvk6rUn

  • Jeancarlo Zelaya

    I’m can view the ‘pictures’ just fine and I’m using the latest Firefox and Chrome.
    Thanks for the tutorial Jacob.
    On one of the steps it says to change the layer mode to ‘Screen’ but the photo that accompanies ‘Soft Light’ is selected. I believe it is ‘Soft Light’.
    They don’t look to different, I’m just wondering.

  • Thanks, Jacob. This is a nice, rounded tutorial for both the Photoshop work and the CSS for the sprite. Well written and with the process nicely laid out.

  • Stumble: this is an amazing Photoshop tutorial for web designers. Love the UI buttons and graphics

  • You did it again Jacob. You’re such a generous guy. You didn’t just post the tut but you’ve been assisting everyone all the way to make everything work out. Design Instruct will surely soar higher for another year to come.

    Great tut!

  • Thank you for your well-wishes and comments on our content Angelee!

  • @Jeancarlo Zelaya: Thank you! Nice catch. It is Soft Light, you are right. I’ve corrected it.

  • I think that the hover state is more like a down state.
    Maybe a light gradient would be nicer for a hover state,
    but does not work that nice with light colors (like on my website)

  • Good tut. Thanks.

  • Hey Nice Tut Jacob! Enjoyed it 🙂

    Thanks

  • Thanks for the tutorials Jacob.

    I just wanna say one more thing.
    For the last 2 years,some people think that there is no space left in the room for new design blogs or whatever.Well,i always think that there will be always enough space in the room if you create and manage a blog like Design Instruct.

    Regards

  • Thanks Arshad!

  • vinaygowda

    Thanks Mate… 🙂

  • This works for me in FF for Mac. Thanks for the tutorial Jacob.

  • very cool thank you! Is there a way to work in a onclick state using this technique? After following your tutorial I made another layer group with a orange colored version of the button to use when the button is pressed. But I can’t figure out how to implement that change in css, it seems to me it might not be possible, even with css3. Is my only option to use javascript or to create another separate image and use the onclick function?

  • If the “onclick” state looks different from the normal and hover state, add it to the bottom of the CSS sprite. If you do that, all you have to do is use the :active pseudo-class to style your “onclick” state.

    So let us say you went ahead and added a 3rd version of the button at the bottom of the sprite.

    Then the CSS would be:

    a:active {
    background: url(web_button.png) no-repeat 0 -100px;
    }
    

    Notice that we use -100px for the y-position instead of 0 (which is the normal state of the button) or -50px (which is the hover state of the button).

    If I completely missed the mark, let me know. If this helps, awesome!

  • this is exactaly what I needed, thank you. Works perfect! What I didn’t realize is that active also meant onclick. I thought it only applied to if the link url and current page url matched. Thanks again!

  • Wonderful.

    But to avoid confusion of other readers reading your comment, onclick and :active are not the same; they are not synonymous. onclick is an HTML attribute, while :active is a CSS pseudo-class. onclick refers to an HTML attribute typically used for executing JavaScript code. It’s used for watching a click mouse event, and the value assigned to it is what is performed when this event happens. For example, <a onclick="alert('I clicked on this hyperlink');"> would print out “I clicked on this hyperlink” in a dialog window when you click on it.

    I guess, onclick for HTML/JS is sort of the equivalent of :active in CSS, though I hesitate on making that comparison.

    If it’s not too much trouble, post a link here of your web button; we always love seeing how readers implement the things on our tutorial!

  • Super interesting to make a simple button.

    Especially for the “outline:none;” line code that i never used in my designs.

    Thanks for sharing this !

  • Jeancarlo Zelaya

    Here is a link to the one I created.

    http://min.us/mvfLP30

    It’s a bit smaller/different than the one in the tutorial but nonetheless it works and I learned.
    Thanks for the tutorial Jacob.

  • Nice!

  • Thanks Jacon, I’ve been in print base but now moving into web work, this is a great tut. I know how to do the artwork but not the CSS stuff. Many thanks!

  • Jacob not Jacon, sorry.

  • Glad you found this useful.

  • Kenessar

    I Love this article. It easy to understand and immediately apply. Thank a lot.

  • Abdullah Bin Laique

    nice tutorial Jacob…Thanks…

  • Shauna

    Jacob,

    I am having problems with this step,

    Switch back to our main document. In the Layers Panel, Ctrl/Cmd + click on the Vector mask thumbnail of the Base Shape layer to load a selection around the shape of the button (choosing Select > Load Selection does the same thing).

    When I press ctrl/command and click nothing happens.

    Would appreciate your help.

    Thanks

    Shauna

  • You are clicking on the thumbnail/preview image of the layer, in the Layers Panel? Have you tried Select > Load Selection?

  • Hi Jacob,

    I’ve been looking for a nice button online for hours now and this is perfect! It’s a nice slick Web 2.0 deisgn with a great hover effect.

    Thanks so much!!

  • tahir khan

    nice tutorial thanks

  • Simple and very elegant design

  • Leí tu comentario, aunque un poco critico, me luce una buena piea, que ayuda al fortalecimiento de un pensamiento libre.

  • This comment was translated by Google Translate as follows:

    I read your comment, although a bit critical, I look good piea, which helps to strengthen a free thought.

  • Sr. Jacobo Gube, le cuento que poquito a poquito asimilo sus sabias orientaciones, más, como novato al fin, evano lentamente, creo que es un proceso aleccionador, del que se aprende muchisimo. Espero contar con su paciencia y la disposición de continuar ayudando a que pueda sacar a la red una edificante ofenta.

    Les felicito, estamos a su entera dispoción.

  • Nice step by step instructions. I will be using this a lot! Thanks for sharing!

  • Folks, none of this needed to be done in Photoshop. You can do the button in CSS using a .js plugin from Yahoo Developers library. We need to cut down the amount of images we use on the web, especially if your gonna waste time with a roll over graphic. Look at the image on: http://www.squarespace.com/ nothing you see in TRY IT FREE is a graphic, it is all CSS and a JS.

  • Its a very nice and simple tutorial with simple tricks . I think color combination is most important to design any web element. and here ,for color combination ,it looks grate !
    Thank you

  • Sharath

    Nice Tutorial…Thanx

  • Great ! Thanks for sharing..!

  • Thanks for this. I’m always having a hard time making buttons.

  • just came across this great tutorial – simple and beautiful – thank you!

  • just came across this great tutorial – simple and beautiful – thank you!

  • Nice technique, I have created a web button but in different way, this is what I mean: http://scxlive.hubpages.com/hub/Simple-Web-Button
    Thank you and I like the pattern, I missed that when make a button. 😀

  • This tutorials is really awesome.Mark…

  • John Dodd

    Hi just a newbie so excuse my ignorance but why is top half of button only visible in browser cuts of button just below beginning of text . Ps love your sites and tuts thanks John

  • Hi i was looking for this tutorial . thnx so much for posting this

  • Casey Dennison

    Very cool Jacob. This will help me out with sprites!

  • mark philip

    nice tutorial..thanks..

  • Anuradha

    Great work…. thank you very much…

  • Princi

    Thanks a ton for this wonderful tutorial. Every step has been explained in detail.

  • Thank you for the tutorial i did not get the part of Inverse selection i tried this in CS6 but when ever i select diagonal Pattern layer go to contract it does not contracts gives error No Pixels selected :(, other then that the whole tutorial was awesome

  • Juicemaster

    This tutorial is useless for CS6 users and by the way it is also poorly explained. Just in step 3 when you are trying to give the base a layer style you seem to have omitted a lot of explanations. Were you using a mask? Because that seems to be the only way to have the extra layer to appear next to the first one. Then in step 4 when you say give it a diagonal pattern, you know in order to make it perfect, you have to use the diagonal line tool, not just the pencil. Then when you say ctrl and click, you have to pick the selection in order to load. Were you drunk when you created this tutorial?

  • Thanks for sharing a great tutorial 🙂
    I think it’s simple and easy to understand.