30 марта 2008 ~ 6 Комментариев

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

Css Дизайн

fdgfd

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.

Техника раздвижных дверей

Что бы сделать наши кнопки практичными, мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся техникой «раздвижных дверей»(slidingdoors).

Наша кнопка будет состоять из основного тега <a> с вложенным в него тегом <span>, каждый из которых содержит одну из частей фонового рисунка.

Вот то, что HTML выглядит следующим образом:

<a class="button" href="#"><span>Bring world peace</span></a>

Очень просто, не так ли?

Теперь, нам надо разобраться с оформлением нашей кнопки в нормальном состоянии и в состоянии нажатия.

Вот что я думаю:

button-design

Мы будем использовать для обоих состояний одно изображение, просто изменяя его background-position.

Вот так выглядит наша заготовка с учетом всех факторов:

bg_button_span bg_button_a

Оформляем кнопку

Оформляем с помощью следующего css кода:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

Специально для IE

В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript:

<a class="button" href="#" onclick="this.blur();"><span> … </span></a>

Готово ^_^

Посмотреть пример

Скачать пример

По мотивам: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

6 Комментариев для “Делаем красивые кнопки”

  1. vlad 30 марта 2008 at 23:30 Permalink

    ctrl+колесо?

    Ответить
  2. Я собственной персоной 30 марта 2008 at 23:45 Permalink

    ctrl+колесо?

    —Мыло + веревка?

    Многие дизайны разьезжаются при увеличении шрифта, а не только эта кнопочка.
    Не так уж и много человек пользуются увеличением, особенно если изначально подумать над адекватностью размеров шрифта.

    Ответить
  3. Я 19 апреля 2008 at 19:18 Permalink

    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwww ww
    при таком названии кнопка преврашается в… 2 кнопки!
    Не катит…

    Ответить
  4. Я собственной персоной 19 апреля 2008 at 19:29 Permalink

    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwww ww
    при таком названии кнопка преврашается в… 2 кнопки!
    Не катит…

    А Вам действительно нужна такая большая кнопка?

    Ответить
  5. Mitron 21 апреля 2008 at 1:28 Permalink

    немного изменить картинки, чуть подправить css и при изменении шрифта (в ограниченных, правда, параметрах) уже можно жить… так что не всё так страшно, спасибо.

    Ответить
  6. NKostya 19 июля 2008 at 4:53 Permalink

    немного изменить картинки, чуть подправить css и при изменении шрифта (в ограниченных, правда, параметрах) уже можно жить… так что не всё так страшно, спасибо.

    тогда можно размер шрифта сразу в абсолютных величинах задать и не мучаться… самое главно, чтобы размер изначально был адекватным

    Ответить

Оставить комментарий