Pull to refresh

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

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

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

Например:
<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 возникает баг при нажатии на
<span class="button"><input type="button" value="button"></span>
, пока что я его не победил.

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

Articles