Web Design Tutorial Creating Buttons with Icon Using CSS and Images

January 14th 2011

Continued from previous article on creating web buttons using CSS and an image, to further make the button’s purpose obvious and get more users attention, what if we want to add an icon on top of the button? Let’s say for instance the following button with a search loop icon on top of it:

Search Text Here


Search here with very long long text anchor

The graphic images used are only two: (1). the button background sprite – several images upper & lower combined into one sprite image to save loading time
image sprite
and (2). a search or loop icon to be put on top emphasizing the button usage
loop

Below are the CSS code to combine & arrange the above images to display a beautiful button ready to use with any text:

  1. Define style for class named "icon-button " with the following properties
    a.icon-button { 
    	padding-right: 17px; 
    	height: 34px; 
    	display: block; 
    	float: left; 
    	font: 14px Arial, Helvetica, sans-serif; 
    	color: #444444;
    	margin: 8px 0px;  
    	background: url(images/button-bg.png) no-repeat right -34px; 
    	text-shadow: #ffffff 1px 1px 1px;
    	text-decoration: none; 
    }
    

    These CSS code set the class definition for class icon-button embedded to a link (a.icon-button) described below in more details:
    Line 2-3 to set padding dimension on right hand to 17 pixels, then set height to 34 pixels.
    Line 4-5 to change display box properties set to block and float it to left.
    Line 6-7 set font size to 14 pixels using font type either (in order of preference) Arial, Helvetica or sans-serif with color set to hexadecimal #444444.
    Line 8 set margin vertical at 8 pixels while margin horizontal 0 pixel.
    Line 9 set background image to use (a combined as a sprite), set to not repeat and appear horizontally 0 pixel from right and 34 pixels from top.
    Line 10 set text shadow property to color #ffffff (white) with x-coordinate of the text-shadow set to 1 pixel relative to the text, y-coordinate of text-shadow set to 1px relative to the text and blur radius of the text-shadow set to 1 pixel.
    lastly line 11 to make the default underline for link to disappear.

  2. a.icon-button span.et-icon { 
    	background: url(images/button-bg.png) no-repeat; 
    	height: 34px; 
    	display: block; 
    }
    

    Now we define tag span with class named "et-icon" valid only if placed inside a link with class name "icon-button", described as follows:
    Line 14-16 background image used display only once, not repeated with box display property shifted to block with height of 34 pixels – the height of the button.

  3. a.icon-button span.et-icon span { 
    	padding: 0px 0px 0px 40px; 
    	display: block; 
    	height: 34px; 
    	line-height: 32px; 
    }

    Further we define another span tag nested inside span and a link defined before (the "a.icon-button span.et-icon"), properties described below:
    Line 19-22 padding left set to 40 pixels, while the other 3 top, right and bottom set to 0, with box display again set to block, with height of 32 pixels and text line height 32 pixels so wrapping text, if happened, will practically be out of sight.

  4. a.icon-button:hover { 
    	text-decoration: none; 
    	color: #000000 !important; 
    	background: url(images/button-bg.png) no-repeat right bottom; 
    }

    Then we define the hover state for link "a.icon-button".
    Line 25-27 above basically state properties of this hover state link are without underline, color #000000 (black) and emphasize important to obey with "!important" remark, while the background used is again the "button-bg.png" sprite this time only the right bottom part shown within the 34 pixels height.

  5. a.icon-button:hover span.et-icon { 
    	background: url(images/button-bg.png) no-repeat left -68px; 
    }

    Line 30 define for span with class named "et-icon" the background to be shifted to its very left and 68 pixels down vertically to instead display the darker background.

  6. a.search-icon span.et-icon span { 
    	background: url(images/search-icon.png) no-repeat 15px 8px; 
    }

    Lastly line 33 states CSS properties for tag span nested inside "a.search-icon span.et-icon" to use the search icon with placement 15 pixels from left and 8 pixels from top.

Preview our button result below:
Search


Long Long Search Text Placed Here

The complete CSS source code with images & HTML used above can be downloaded
Here: Button with Search Icon using CSS >.