Pull to refresh

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

Reading time 2 min
Views 11K
Original author: Alex Griffioen
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>


Готово ^_^

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


Источник: Чернев.Ру — Веб-мастеринг в позитивном формате!
Tags:
Hubs:
+44
Comments 159
Comments Comments 159

Articles