Делаем красивые кнопочки

Заметки - Фишки CSS

Зачастую стандартный вид кнопочек не может сочетаться с концепцией дизайна, которую придумал дизайнер, поэтому он рисует свои кнопочки.

Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.

Например:

<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.

Вроде бы все просто, но тогда верстальщику придется под каждую форму или ссылку вырезать новую картинку, тем самым плодя кучу картинок и тратя драгоценное время.

Я предлагаю следующий подход к этому делу (может кто-то уже придумал такой способ, но я сразу отмажусь, сказав, что я его еще не видел).

Для этого нам потребуется:

Собственно вот 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.

Посмотреть в деле можно тут.

Все это дело тестировалось под IE6/7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53
Однако под IE8 возникает баг при нажатии на

, пока что я его не победил.

P.S. Прошу сжалится надо мной и не ругать сильно, этой мой первый пост.
P.P.S. Перенес в тематический блог