Резиновая кнопка со скругленными углами и полупрозрачным фоном на CSS 2.1

Несмотря на рассвет css3 в вебе, многие до сих пор не могут воспользоваться всеми его преимуществами из-за ограничений старых версий Internet Explorer. К сожалению, далеко не каждый заказчик может одобрить подход graceful degradation, это скорее прерогатива собственных проектов. Поэтому все еще актуальны техники, которые безпроблемно работают и в старых браузерах. У опытных верстальщиков скорее всего уже есть свои наработанные практики и сниппеты, которые они применяют на своих проектах. Собственно, есть и у меня своя заготовка. Может кому пригодится.

Transparent flexible link-button

Подробно описывать стили смысла нет, проще посмотреть фаербагом. Единственное, отмечу, что я старался сделать максимально универсальный класс, который будет применим как текстовым ссылкам, так и к инпут-кнопкам. Стили олдскульные, поэтому будут актуальны для старых IE. Если же есть возможность отказаться от IE7, то дополнительный тег em можно заменить псевдо-классом :after, тем самым сведя количество тегов к минимуму.

<a class="btn-flex" href="#link">Transparent flexible link-button<em></em></a>

<span class="btn-flex"><input type="submit" value="Transparent flexible submit-button" /><em></em></span>
.btn-flex, .btn-flex input {
    color: #fff !important;
    cursor: pointer;
    font: bold 14px/35px Arial,sans-serif;
    height: 35px;
    margin: 0 -10px 0 0;
    padding-left: 10px;
    padding-right: 0;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
    white-space: nowrap;
    vertical-align: top;
    outline: none;
}
.btn-flex {
    background: url("flexible.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    margin-right: 10px;
    padding-left: 10px;
    position: relative;
}
.btn-flex em {
    background: url(flexible.png) 100% 0 no-repeat;
    display: block;
    width: 10px;
    white-space: nowrap;
    position: absolute;
    right: -10px;
    top: 0;
    height: 35px;
    z-index: 1;
}

.btn-flex input {
    position: relative;
    border: none;
    background: none;
    overflow: visible;
    padding-right: 10px;
    margin-left: -10px;
    z-index: 2;
}
.btn-flex:hover { background-position: 0 100%; }
.btn-flex:hover em { background-position: 100% 100%; }
.btn-flex:active {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Одно мнение о Резиновая кнопка со скругленными углами и полупрозрачным фоном на CSS 2.1

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *