CSS按钮推拉门

Question

我正在尝试使用 css 的“滑动门”技术来设置按钮的样式，但它无法正常工作。我目前只能访问 firefox 3，所以这个问题在其他浏览器中可能不会出现，但我也想为 firefox 解决它。

这是问题所在的图片：

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

如您所见，第二面比第一面低一个像素，而且还不够靠右。这是我正在使用的代码：

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

尝试将按钮的 padding 设置为零，然后使用 padding-left 和 width 将文本放在正确的位置。

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

如果您查看 HTML 块显示：填充被添加到对象的整体宽度，背景从填充区域开始，右半部分被填充

但请注意，按钮元素不适合嵌入任何其他节点（如 span）。它们在浏览器中可能工作正常，但 IE 会让你的生活变得非常艰难（更不用说据我所知，它是无效的）

Answer 3

像按钮这样的表单元素总是很难设置样式，并且充斥着这样的小错误。

与其将类应用于按钮元素本身，不如尝试将按钮的样式应用于实际按钮内的额外跨度元素？

简而言之：

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>

Answer 4

我使用 DIV 而不是按钮，并且具有就地构建它们的功能。它最终看起来像这样：

alt text 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;
}