How to make a nice CSS buttons

[farscapeone]

I can't believe I never posted a tutorial here on x10. Shame on me :happysad: I hope you'll forgive me.

Is this tutorial for you?
Let me start with something simple. Have you ever needed a nice and modern looking buttons on your website but you don't want to make each one of them as a separate image? Do you want to make one CSS style and use it for all your buttons? Do you want to make a nice hover effect? If answer is yes then this tutorial is for you.


You will need:

• a text editor or Dreamweaver
• a noraml state background image*
• a hover state background image*

* Included in attachments.


How to make a hover effect in CSS
Making a hover effect in CSS is as easy as it gets. All you have to do is define a pseudo-class and you're ready to go. Here's an example.

a{
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

This example shows how to make all link tags (HTML a tags) underlined when you hover over them. This is possible because of the CSS :hover pseudo-class. Remember, pseudo-classes have to be defined after their parent classes and will inherit all their properties. So of you want to make some hover effect define a :hover pseudo-class after it's parent class and make changes or add now properties.

NOTE! In IE6 pseudo-classes are supported only for link (a) tag. In other browsers this works for any other HTML tag (like div, tr, td, li, ...).


How to separate regular link form buttons?
First of all we have to define a parent class witch will separate an ordinary link form a button. We can do this by making a class of links. Here's an example.

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

This will separate an ordinary link form a link with class="button" and that's exactly what we need.


Making a button class and pseudo-class
Now that we understand what is the CSS class and pseudo-class we can start making our buttons. They will be 32px high and 92px wide with centered text but you can specify whatever size you want. Look at the code below.

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 - a.button
display:inline-block; - A regular link tag is displayed as an inline object witch means it's width and height are calculated automatically based on it's content. There's no way to set a custom width or height to a regular link tag. That's why we need to convert it into a block element so we can apply custom width and height. We also need to preserve an inline display mode. That's why we set this option to inline-block.

width:80px; - I said that we are making a 92px wide buttons, right? So why did I set the width to 80px? It's simple, we want to put a 5px padding in all directions and 1px border witch will make it 92px at the end. Simply calculate: 80px width + 5px left padding + 5px right padding + 1px left border + 1px right border = 92px overall width.

height:20px; - The reason is the same as above but this time we calculated top and bottom padding and borders. The end result is: 20px + 5px + 5px + 1px + 1px = 32px overall height.

padding:5px; - 5px padding to all sided (top, left, bottom and right).

border:1px #D7D7D7 solid; - 1px wide solid border with a color slightly darker then the button background.

text-align:center; - Aligning text to be in the middle of the button (horizontally).

text-decoration:none; - Removing any text decorations, like underline ...

color:#666666; - Button text color.

background:url(../images/button_bg.png) repeat-x; - This is the most important part of the button. This is where you specify the background image for your buttons. Remember to check your image path so the CSS file can load it properly. Use repeat-x to stretch the background image to fit the width of the button. I used a vertical gradient for the background so I can repeat it down the x axis. That's why I made my background to be 1px in width. This is great because by buttons use one background image witch is only 1px wide making it no more then 200 bytes (in PNG format)!!! How cool is that :cool:



Explanation - a.button:hover
Remember what I said about hove pseudo-classes? You only need to specify the changes to your parent class. That's why we only have two lines of code for our pseudo-class.

background:url(../images/button_bg_hover.png) repeat-x; - This is the main hover effect we wanted to make. It's looks almost the same as the one above except we used a different image that will represent our hover effect.

text-decoration:none; - This second line of code looks obsolete but it's not. In some cases, when you have a really complex CSS structure the button text will be underlined on hover. It's unlikely that you'll run into this situation but, like they all say, better safe then sorry ;)


Usage
Here's an example of a button made with CSS.

<html>
<head>
<title>Nice CSS Buttons Tutorial by AivelDesign</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>Nice CSS Buttons Tutorial by AivelDesign</h1>
<a class="button" href="http://www.aiveldesign.com/">Design</a>
</body>
</html>

NOTE! Remember to put the images in the same directory as this example page or change the background url to point to the place where you put them.


Example explanation
a class="button" href="http://www.aiveldesign.com/">Design</a> - This is the way to convert any link element into a button. You can use it as any other link and change the text, href, target or any other property any time you like.


You can test a example or download it.


That's all talks I hope somebody will find this useful.


P.S. You can find all the files needed for this tutorial in attachment section of this post.

[Gouri]

Nice tutorial to CSS buttons

Cool

[janvdb]

Thanks for the tut.
gonna use this one the next time to create buttons!!!!

[vesiva]

Thank you. That is very usefull

[tinhanhvoiva_220617]

Ok. Great very nice ....thank alot ..thank all

[southwind]

Thanks, Very Nice Tut!!!!

[vicenteernesto58]

thanks for this useful tutorial

[vesiva1]

Very helpful! Thanks!

[ariasmac]

Pretty nice, thanks pal!

[craigalanbarnes36]

Very good information...thank you for sharing!