Line25

CSS Basics: How to Design & Code a Stylish Button

Read the full post

Some of my most popular articles and tutorials are those that cover the basics. In this post we’ll go through the process of designing a stylish button graphic in Photoshop, then build a complete working example in HTML and CSS. We’ll be looking at pseudo selectors in particular to create hover and active states for the button.

View the CSS button demo

The button we’ll be designing is built with lots of detail to create a semi-realistic three dimensional appearance. The button has three states – normal, hover and active. In the normal state the button is made entirely of blue, when hovered the text within the logo turns to purple, then when the button is clicked it moves to give visual feedback that relates to how a button would react in real life.

View the CSS button demo

The Photoshop concept

Open up Adobe Photoshop and create a new document. Fill the background with grey and add a white highlight to the centre using a soft brush. On a new layer draw a rounded rectangle with 10px corner radius.

Double click the layer to open up the Layer Styles window and add a Gradient Overlay. Enter the colours #0730a5 and #a4c9f3 then adjust the angle to 90 degrees.

Give the button an Inner Shadow to create more of a three dimensional appearance. Adjust the settings to 2px Distance and 9px Size using the colour #d9f7ff.

Add a thin 1px Stroke to the inside using the colour #8eb4f2 to give the button a fine outlining border.

Finally, use the Drop Shadow feature to add a fine 1px highlight on the bottom edge. Change the settings to Normal, 100% Opacity, 90 degrees, 1px Distance and 0px Size using the colour #4285bd;

Create a new layer underneath the current button and draw another rounded rectangle. Match the new rectangle to the top and sides but extend it slightly on the bottom edge.

Add a Gradient Overlay layer style to this new rectangle. Use the colours #174994 and #3c64bf at the outer edges of the gradient bar to create realistic shading.

Give this lower button shape a thin 1px Stroke with the colour #315a99. Align the stroke to the Center.

Finally add a soft Drop Shadow to create more shading to provide a touch of realism to the design. Adjust the settings to 30% Opacity, 5px Distance and 18px Size.

Use the Text tool to add some wording to the button, then give the text a Gradient Overlay using the colours #3062ae and #557ac9.

Add an Inner Shadow to the text to give it an inset appearance. Use the settings #5c8fdf, 100% Opacity, 3px Distance and 4px Size.

Finish off the inset effect by adding a highlight to the bottom edge. This is done using the Drop Shadow feature with the settings Normal, #8eb4f2, 100% Opacity, 90 degrees, 1px Distance and 1px Size.

Group all the elements that make up the button, then duplicate the group. CMD+Click the text layer and fill a new layer with purple (#6c3a9c).

Change this layer’s blending mode to Color. This variation of the button will appear when the button is hovered by the cursor.

Duplicate the group again, this version will be the active state when the button is pressed. Move the upper layer of the button downwards.

Draw a selection around the excess left above the button and nudge it downwards to match the outline. This essentially shortens the button’s height.

Toggle off the background layers and draw a selection around the button. Toggle on just the normal button layer group and Copy Merged (CMD+Shift+C).

Copy and Paste all three button states into a new file. Each selection should be exactly the same size. Save this file for web as a PNG-24 with alpha transparency.

The HTML structure

View the HTML code

Being a demo file with just one button the HTML is very simple. First we start with the basic document structure of Doctype, title and link to the CSS stylesheet. The container div will help centre up our demo while the actual button is created from a simple anchor. This <a> is given a class of “btn” so it can be targeted for special CSS treatment.

The CSS styling

View the CSS code

The CSS stylesheet begins with a simple CSS reset to remove the browser defaults from the elements in use. The demo file is then set up with the grey background and centred container div.

View the CSS code

The anchor with the class of btn is targeted with CSS using a.btn. It is first converted from an inline element to a block element to allow for a width and height to be added and furthermore to increase the clickable area. The height of the anchor matches the height of a single button graphic in the sprite image, creating a kind of window which will mask the other two button states. The image sprite is added as a background image and text-indent: -9999px; used to shift the default text off screen.

The different button states are created using CSS pseudo selectors. For anchor elements these include :hover, :active, :visited and :focus. The background image is shifted into place for both the :hover and :active states for the button to show the relevant image in each sitation.

If you test the button in the browser you’ll see an ugly dotted border around the element. This can be fixed using overflow: hidden; to prevent the border extending across the page, or it can be removed altogether by adding outline: none; to all anchor elements. Remember that this visual cue is important for users browsing with a keyboard and/or screenreader, so a backup should be provided using the :focus selector. By adding the :focus selector to the same code as :hover, we can simply replicate the visual change on both mouse hover and keyboard focus.

The final CSS button demo

View the CSS button demo

Check out the demo to see the complete CSS button in action. Notice how the default blue button state is shown until it is hovered by the mouse. The text then changes to purple, then if the button is clicked, the :active state switches the background image to give the impression that the button has been physically pressed.

View the CSS button demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

35 Comments

  1. AviaT- says:

    A clear and concise approach to a very commonly and widely used technique. Good stuff!

    This will undoubtedly be useful to plenty of people.

  2. jameskoster says:

    You could use css3 to replicate this button almost to perfection. Might be a nice follow-up article?

    • jack says:

      honestly I assumed it was… a sprite tutorial for buttons isn't very cutting edge considering there are already 1000000 versions of this.. really there's already a ton of tutorials/galleries/snippets for CSS3 buttons too…

    • Ahmad Alfy says:

      I was so excited when I saw the screenshot at the beginning I thought "hey we're going to create that awesome looking button with CSS3" then I found Photoshop and I was "doh!"
      But the tutorial is great :) Good job

  3. Kevin Esther says:

    Push the button. Being a newbie basic tutorials are great and give me new techniques that in can arm myself with, more like this please. thanks

  4. Thomas Maier says:

    BLUE and PURPLE. Srsly, you are the king of color management. :D

  5. bux says:

    Nice, but you can style those buttons with pure CSS3 like here: <a href="http://joquery.com/2011/tutorial-css3-push-down-buttons">http://joquery.com/2011/tutorial-css3-push-down-buttons</a&gt;

    (It's in german btw..)

  6. I want more WordPress stuff what about the magic field plugin nobody wrote anything about it and it's pretty cool

  7. Thank you its nice to have a nice simple tut because everyone is at a different stage in web design.

  8. ABDUL JANOO says:

    COOL and Thanks a lot 4 dis tutorial…………

    From long back I was searching this tutorial Chris….

    I will use this concept in funny way… like ur site.
    Thanks a lot.

  9. tom says:

    it's a graphical button, not a "css button"…

  10. I would say this is little old school. If you a going to create stylish buttons you should really be doing them with CSS3 styles.

  11. Paul Randall says:

    Sprites, seriously. With all that is possible this should be done in CSS.

    I'm offering my services to guest author a tutorial on one if you would like.

  12. Rob says:

    While it could be done in CSS, and I use CSS3 techniques around sites I do, but if you want/have to have the sites looking as spot on as possible across all browsers for your clients then CSS3 methods aren't always the best way to go.

    Something like a button design could be extremely important to reenforcing the companies branding around a site. So a consistent and identical performance might be required.

    Working on more personal projects I might well have a different view.

    Great tutorial and nicely explained.

  13. Rob says:

    Nice tutorial, but was honestly disappointed when I hovered over the demo of the button. Was really hoping to see the button animate down, rather than just the font change colors.

  14. Ahmad Alfy says:

    WOW!!! Everyone is trolling about the CSS3 buttons xD

  15. Pretty Smooth!!!! Nice explanations!!!

  16. Steph says:

    This is actually very nice. Thank you. My client base has to still be pushed from ie6 25% of the time, so CSS3 is not my main concern.

  17. Arnab says:

    I tried the exact steps in Photoshop 7 but it did not come out as you have shown. Does it work differently in PS7? Btw, thanks for the detailed steps!

  18. Ashish says:

    The way of doing this is cool, but the design shown in the result doesn't looks good.

    Anyway thanks….

  19. Derryl says:

    CSS buttons are fun… to experiment with. But you're inevitably leaving some people at the wayside (ahem, IE, older versions of FF).

    Here's a button I was playing around with using CSS3 to create a "3D" effect. But I wouldn't use it on a client's actual website until it becomes possible to achieve cross-browser consistency.

    Feel free to appropriate the code if you find it useful.

    http://www.xl-interactive.com/sandbox/cssfun/

  20. Thanks for the comments everyone. It's funny whenever I post something CSS3 related the comments are full of "this won't work in X browser" – Whenever I post a basic CSS tutorial everyone wants CSS3 ;-)

    To those who feel mislead that the tutorial was about a CSS3 button – I did add the words "CSS Basics" in the title and describe that we'd be using Photoshop in the intro.

    I'll definitely look at creating a CSS3 button tutorial soon though as it seems a sought after topic, although I don't think a full-on CSS3 button that replicates this design would be practical in the real world. A simple version yes, but this amount of gradients would soon fill out the stylesheet with lots of code just for a single button, plus there's the browser support to keep in mind.

  21. Tretans says:

    Like This Post.. ;)

  22. i really like your way of describe, helping tutorial. thanks

  23. Chris says:

    Cool tut mista ! Will certainly be using this on my next project where I am creating a blog/media section for my site… ;-)

  24. Carlos says:

    Chris, this is the technique I use currently but what about sprites!?

    I have been trying to get my sprites to work,but nnooooo. this tut is so simple to understand. Could you do one about image sprites in the same simplistic format? It would really help me with this seemingly simple concept. thanks!

  25. PJ says:

    Like This Post

  26. A very put together tutorial!

    We hope to see more creative buttons from now on.

  27. It's really great post.Thanks for shearing it.

  28. asim craft says:

    good explanation. check out what we do @digitaldesignzmedia.com

  29. Shane Barnes says:

    Thanks a bunch for the great post Chris, I've been searching for this kind of tutorial for a few days and hadn't found what I've been looking for until now!!!

  30. LKenneth says:

    Death to ie6! we should just adopt all css3 techniques and force users and business to upgrade.

Comments are now closed