Web Design Tutorial Creating Buttons using CSS and an Image

January 5th 2011

When web designers create websites they often use a lot of web buttons inviting users to click & have something done in return.

Many parts of web page require web buttons which obviously has main requirement to look stand out & bold hence get attention of the website users, for instance take a look at the following button:

Button Here


or with a longer text like below

Web Button Tutorial

In this web design tutorial, we will create the above beautiful button using CSS and an image that you can try by yourself, a practical, simple and easy step by step to make.

Step by step create a button with CSS:

  1. First prepare a transparent image with an exact dimension 463 x 64 pixels and in PNG format (Portable Network Graphic) like below in Photoshop:
    CSS button
    Of course you can make different design with Photoshop to make a different design, but in this web design tutorial we will use this design.
  2. After that, we can begin to write the code with CSS and then HTML code. You can use your favorite text editor, e.g. notepad or Dreamweaver. Write the following CSS code within the <style> HTML tag. This code declare “green-button” class.
a.green-button, a.green-button:link, a.green-button:visited {
      padding-right : 17px;
      height : 32px;
      float : left;
      display : block;
      font : 14px Arial, sans-serif;
      color : #000000;
      margin: 8px 0px;
      text-shadow :  #555555 1px 1px 1px;
      text-decoration: none;
}
  1. To emphasize the users mouse’s hover state, we’ll add more effect in the text of button with white shadow
a.green-button : hover {
color: #000000;
text-shadow: #ffffff 1px 1px 1px;
}
  1. The button will need distance with any text, other button or anything, because it can look not good. So we use span to make that distance.
a.green-button span {
height: 32px;
display: block;
line-height: 30px;
padding: 0px 0px 0px 17px;
}
  1. We must call the background from image above.
background : url(images/lightgreen.png) no-repeat bottom right;
    color: #FFFFFF;
}
a.lightgreen span {
    background : url(images/lightgreen.png) no-repeat ;
}
  1. After the CSS code finished,we continue to write the HTML code. First, we must call the CSS code with tag “Class” in the tag “a” and make it between “Body” Tag.
<a href="#"><span>Short Button Text</span></a> 
<br /> 
<a href="#"><span>This a Sample of Very Very Very Very Long Button </span></a>

The result can be seen below:
Short Button Text


or with a much longer text the button can accommodate as shown below:

This a Sample of Very Very Very Very Long Button

The complete working sample for this CSS button web design tutorial can be downloaded here >.