Css按鈕滑動門

我試圖使用css'滑動門'技術來設計按鈕樣式，但它無法正常工作。我目前只能訪問firefox 3，所以這個問題可能不會發生在其他瀏覽器，但我想解決它的Firefox。Css按鈕滑動門

這裏的問題是什麼圖片：

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來相對定位跨度，但是文本不對齊。

謝謝。

來源

2009-07-30 Zim

嘗試按鈕的邊距設置爲零，然後用打填充左和寬度把文本中正確的位置。

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

如果你看一下HTML塊顯示：填充被添加到該對象的整體寬度，和背景開始在填補區域和右半部填充

但是請注意，按鈕元素不適合嵌入（如跨度）內的任何其他節點。他們可能在瀏覽器中正常工作，但IE可以讓你的生活真的很難（更不用說，據我所知，這是無效的）

來源

2009-07-30 12:35:55 galileoMonkey

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

我只是做了一個div背景推拉門，並從該網站的代碼工作完美。

來源

2009-07-30 12:28:42 Martin

它實際上需要是一個按鈕標籤，因爲它需要提交表單。 – Zim 2009-07-30 12:31:59

爲什麼你不使用這個並通過JavaScript sumbit表單？ – Vnuk 2009-07-30 12:37:32

只需拿起代碼並將其更改爲適合您的需求即可。我使用了一個div類而不是，它工作。我認爲你的問題在於填充。您需要將適當的填充左側和填充右側設置爲較小圖像的大小。或者做什麼@Vnuk說。 – Martin 2009-07-30 12:40:38

如按鈕表單元素總是很難的風格，充滿了小錯誤喜歡這些。

代替將類的按鈕元素本身，也許嘗試和按鈕的造型適用於額外的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>

來源

2009-07-30 12:34:38 Duroth

我使用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; 
}

來源

2009-07-30 13:25:12

Css按鈕滑動門

回答

相關問題