Css кнопка раздвижных дверей

Question

Я пытаюсь оформить кнопку с помощью техники раздвижных дверей css, но она не работает должным образом. У меня есть только доступ к Firefox 3 на данный момент, поэтому эта проблема может не возникнуть в других браузерах, но я бы хотел решить ее и для Firefox.

Вот изображение проблемы:

http://img131.imageshack.us/img131/3559/buttons.png

Как видите, вторая сторона на 1 пиксель ниже первой, а также не достаточно вправо. Вот код, который я использую:

button
{
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button span
{
    display: block;
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a>
<button type="submit"><span>Submit</span></button>

Как мне исправить эту проблему? Я попытался относительно позиционировать диапазон, используя top: -1px right: -3px, но затем текст был выровнен неправильно.

Спасибо.

Answer 1

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Я только что сделал раздвижные двери на фоне div, и код с этого сайта работал отлично.

Answer 2

Я использую DIV вместо кнопок и имею функцию для их создания на месте В конечном итоге это выглядит так:

альтернативный текст http://fb.staging.moveable.com/samplebutton.gif

вызов встроенного скрипта:

<script type='text/javascript'>makeButton("Log in","login()")</script>

---

код:

function makeButton(text,action) {      
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}

CSS:

a.titleGen, .btnText, .btnGText {
    text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
    text-decoration:none
}

.btn {
    height:22px;
    display:inline;
    cursor:pointer;
    margin-right:5px;
}
.btnLeft {
    background-image:url(/images/bg_btnLeft.gif);
    width:3px;
    height:22px;
    float:left;
}
.btnRight {
    background-image:url(/images/bg_btnRight.gif);
    width:5px;
    height:22px;
    float:left;
}
.btnMiddle {
    background-image:url(/images/bg_btnMiddle.gif);
    width:auto;
    height:22px;
    float:left;
}
.btnText {
    color:#ffffff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:2px;
    padding-left:10px;
    padding-right:10px;
}

Answer 3

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

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

Если вы посмотрите на отображение блока HTML: отступы добавляются к общей ширине объекта, и фон начинается в области отступов, а правая половина дополняется

Однако обратите внимание, что элементы кнопки НЕ подходят для встраивания любых других узлов в (например, span). Они могут нормально работать в браузере, но IE может сделать вашу жизнь действительно тяжелой (не говоря уже о том, что, насколько я знаю, это недействительно)

Answer 4

Элементы формы, такие как кнопки, всегда сложно стилизовать, и в них есть мелкие ошибки, подобные этим.

Вместо применения класса к самому элементу кнопки, возможно, попробуйте применить стиль кнопки к дополнительному элементу span внутри фактической кнопки?

Короче говоря:

button {
background: white;
border: 0;
}

button div {
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button div div {
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}

И HTML:

<button type="submit"><div><div>Submit</div></div></button>