Contents

  1. Introduction
  2. Download
  3. HTML Code
  4. CSS Code
CSS Sticky Header

CSS Sticky Header

Introduction

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set. The result is something like this:

Css Button style

Simple, clean and nice. Click on the link below to download the source code ready to use in your web projects.

Download

click here to download the source

HTML Code

You can design this kind of buttons using this simple structure: a link (<a> tag) with a span tag inside, in this way: 


Add to your bookmark

You can replicate this structure for all buttons you want to add in your page:

Css Button style

where link tag (<a>) is the "container" of the button:

Css Button style

...and class property for span tag is equal to CSS class which contains in CSS background propery the icon you want to apply to the current button:

Css Button style

For example, you can define new buttons in this way:

CSS Code

This is the CSS code for button "container" which includes the button background and how the button looks (font, width, height...): 

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

...and now we can add some classes to design each button in this way:

/* -------------------- */
/* CLASSES */
/* -------------------- */
.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
...

For each class, you can set background property with the icon you want, directy from your preferred icon set.