We make beautiful buttons

Often, the standard look of buttons cannot be combined with the design concept that the designer came up with, so he draws his own buttons.

What does a typesetter usually do at the sight of such a button? That's right, just plain, cut it out as it is, and inserts it into the layout as a picture.

For example:

< a href ="some_page.html" >< img src ="button.gif" alt ="Button" ></ a >
< input type ="image" src ="button.gif" alt ="Button" >

* This source code was highlighted with Source Code Highlighter .

')
It seems to be simple, but then the coder will have to cut out a new picture for each form or link, thereby producing a lot of pictures and wasting precious time.

I propose the following approach to this matter (maybe someone has already invented such a method, but I immediately otmazhus, saying that I have not seen it yet).

For this we need:

• csshover2.htc and conditional comments to teach IE6 to understand CSS constructs like: div.button: hover
• Two pictures ( 1 , 2 ) for CSS Sprites
• HTML + CSS
• A couple of minutes

Actually here is the HTML:

< span class ="button" >< a href ="#"> Button </ a ></ span >
<!---->
< span class ="button" onClick ="alert(1);" >< b > Button </ b ></ span >
<!---->
< p >< span class ="button" >< input type ="button" value =" Button " ></ span ></ p >
<!---->
< span class ="button" >< a href ="#" >< img src ="i-article.gif" alt ="" > Button </ a ></ span >

* This source code was highlighted with Source Code Highlighter .

CSS:

<!--[if lte IE 6]>
<style type="text/css">
body {
behavior:url("csshover2.htc");
font-size:16px;
}
</style>
<![endif]-->
< style type ="text/css" >
.button {
display:inline-block;
line-height:22px;
padding:0 11px 0 0;
background:url(bg-button-r.gif) right 0 no-repeat;
cursor:pointer;
}
.button a, .button b, .button input {
display:inline-block;
padding:0 0 0 11px;
font-family:Arial;
font-size:13px;
font-weight:normal;
color:#000;
text-decoration:none;
outline:none;
background:url(bg-button-l.gif) 0 0 no-repeat;
border:none;
cursor:pointer;
}
.button input {
height:22px;
}
.button img {
vertical-align:middle;
border:none;
}
.button:hover {
background-position:100% -22px;
}
.button:hover a, .button:hover b, .button:hover input {
background-position:0 -22px;
margin:0;
padding:0 0 0 11px;
}
.button:active {
background-position:100% -44px;
}
.button:active a, .button:active b, .button:active input {
background-position:0 -44px;
}
</ style >

* This source code was highlighted with Source Code Highlighter .

You can view the file here .

The whole thing was tested under IE6 / 7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53
However, under IE8 there is a bug when you click on

  <span class = "button"> <input type = "button" value = "button"> </ span> 

, so far I have not won it.

PS Please take pity on me and do not scold much, this is my first post.
PPS Transferred to a thematic blog