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来相对定位span：-1px right：-3px但是文本是错误对齐的。

感谢。

Answer 1

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

我刚刚在div背景上滑动门，这个网站的代码运行得很好。

Answer 2

像按钮这样的表单元素总是难以设计风格，并且充满了像这样的小错误。

不是将类应用于按钮元素本身，而是尝试将按钮的样式应用于实际按钮内的额外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>

Answer 3

尝试将按钮的填充设置为零，然后使用填充左侧和宽度进行播放以将文本放在正确的位置。

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

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

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

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

Css按钮推拉门

4 个答案: