CSS Basics: How to Design & Code a Stylish Button

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.

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

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

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.

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

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.