как создавать очень красивые и удобные текстовые кнопки

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



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

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

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

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

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



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

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


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

Оформляем с помощью следующего 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>

Готово ^_^

Посмотреть пример
Скачать пример

источник