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

尝试按钮的边距设置为零，然后用打填充左和宽度把文本中正确的位置。

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

如果你看一下HTML块显示：填充被添加到该对象的整体宽度，和背景开始在填补区域和右半部填充

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

Answer 2

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

我只是做了一个div背景推拉门，并从该网站的代码工作完美。

Answer 3

如按钮表单元素总是很难的风格，充满了小错误喜欢这些。

代替将类的按钮元素本身，也许尝试和按钮的造型适用于额外的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 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; 
}