How to Create Attractive Web buttons With CSS

Every developer would like to come with a nice button on the website. But he would never want to create a separate image for each one of them. He would always like to come up with one CSS style that can be used across all the buttons. It should also have a nice hover effect and in case you are looking to learn all this, this is a tutorial you must read then. In order to accomplish this, we require a text editor, a normal state background image and a hover state background image.

How to bring in hover effect on button in CSS?

In order to obtain the effective and attractive hover effect on buttons present in the website, one needs to define a pseudo-class. After accomplish this, you are ready to completion of your task.

Listing 1: Defining the Pseudo Class

a{
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

The above example is used to bring in all HTML link tags underlined when there is a hover-over done on them which is made possible because of CSS :hover pseudo-class. pseudo-classes need to be defined after their parent classes.

This will make it inherit all their properties. Hence in order to make some hover effect, you need to define a :hover pseudo-class after its parent class. This would then require modifications or incorporation of new properties.

Point to note here are that the older versions of Internet Explorer i.e. IE6, have pseudo-classes that are supported only for link (a) tag whereas in other browsers, this works for any other HTML tag.

Example:

Figure 1: Illustrating Hover over Effect on buttons

Separating regular link form buttons:

Here in you need to define a parent class that will suffice the purpose of separating an ordinary link form a button that can be done by making a class of links. The below lists the example of the same:

Listing 2: Defining the Parent Class

a{
  color:#00F; /* blue */
}
a.button{
  color:#F00; /* red*/
}

The above code will help in separation of an ordinary link form a link with class="button".

How to create a button class and pseudo-class?

We will come to our actual process after we are through with the understanding of CSS class that will be 32px high and 92px wide with centred text. However the size can be specified as per the desire. The below code lists the example of the same:

Listing 3: Defining the attributes of a button

a.button{
  display:inline-block;
  width:80px; 
  height:20px;
  padding:5px;
  border:1px #D7D7D7 solid;
  text-align:center;
  text-decoration:none;
  color:#666666;
  background:url(button_bg.png) repeat-x;
}
a.button:hover{
  background:url(button_bg_hover.png) repeat-x;
  text-decoration:none;
}

Explanation of the Code:

display:inline- Here we have a regular link tag that is displayed as an inline object. This means that it's width and height need not calculate manually but can be done automatically and this depends on the content. There is a requirement to convert a custom width or height into a block element so as to apply custom width and height thereby setting this option to inline-block.
width:80px: Here in we want to put a 5px padding in all directions and 1px border. This will make it 92px at the end and when calculation is done: 80px width + 5px left padding + 5px right padding + 1px left border + 1px right border = 92px overall width.
height:20px: This time we calculated top and bottom padding and borders which makes the end result as: 20px + 5px + 5px + 1px + 1px = 32px overall height.
padding:5px: - 5px padding to all sided (top, left, bottom and right).
border:1px #D7D7D7 solid: This refers to 1px wide solid border and that too with a color which is a bit darker than the background of the button.
text-align:center: This makes the text to be aligned in the middle of the button i.e. horizontally.
text-decoration:none: This removes any text decorations, that could be like underline.
color:#666666: This is a button text color.
background:url(../images/button_bg.png) repeat-x: This is regarded as the vital part of the button where you will specify the background image for your buttons. But you check the image path so as to load the CSS file properly. repeat-x can be used to elongate the background image. This will fit the width of the button.
a.button:hover: The changes are only required to be specified to the parent class. This is the reason why there are just two lines of code for the pseudo-class.
background:url(../images/button_bg_hover.png) repeat-x: This complies with the main hover effect that is required and looks almost the same as the one above. The only exception is that a different image is made use of so as to represent the hover effect.
text-decoration:none: The code might look a bit outdate however when in cases we have a complex CSS structure, you will see the button text as underlined on doing hover-over.

The below code lists the example of a button made with CSS.

Listing 4: Creating a button with CSS

<html>
<head>
<title>Attractive CSS Buttons by MrBool</title>
<style type="text/css">
a.button{
  display:inline-block;
  width:80px; 
  height:20px;
  padding:5px;
  border:1px #D7D7D7 solid;
  text-align:center;
  text-decoration:none;
  color:#666666;
  background:url(button_bg.png) repeat-x;
}
a.button:hover{
  background:url(button_bg_hover.png) repeat-x;
  text-decoration:none;
}
</style>
</head>

<body>
<h1>Attractive CSS Buttons  Article by MrBool</h1>
<a class="button" href="http://www.mrbool.com/">Design</a>
</body>
</html>

Example:

Figure 2: Illustration of a Web Button

The point to note here is that, you need to put the images in the same directory as this example page. The other thing could be to modify the background url so as to point to the place where you put them.

Conclusion

We learned with the help of this article how to make attractive and appealing buttons for the website, looked at the hover-over effect on the same making use of HTML. Hope the article was useful and will help you to implement some real stuff in your websites.