一個按鈕CSS樣式：使用<INPUT TYPE =「按鈕>而不是<button>

我試圖使用的樣式，而不是<input type="button">只是<button>一個按鈕，隨着我的代碼，該按鈕在屏幕上一路延伸我只是希望能夠把它適合，它在按鈕上的文本的任何想法一個按鈕CSS樣式：使用<INPUT TYPE =「按鈕>而不是<button>

見jsFiddle Example或繼續執行HTML：？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>WTF</title> 
</head> 
<style type="text/css"> 
.button { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button:hover { 
    background-color:rgba(255,204,0,0.8); 
} 
</style> 
<body> 
<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div> 
</body>

來源

2012-06-15 Varun Shetty

您需要的款式周圍輸入不是DIV –

在您的.button CSS中，請嘗試display:inline-block。看到這個JSFiddle

來源

2012-06-15 15:23:08 huzzah

你想像給定的fiddle!

HTML

<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div>

CSS

.button input[type="button"] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
    display:block; 
    width:100%; 
} 
.button input[type="button"]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

來源

2012-06-15 15:21:24 SVS

Float:left ......雖然我想你想輸入被稱呼不是DIV？

.button input{ 
    color:#08233e;float:left; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button input:hover{ 
    background-color:rgba(255,204,0,0.8); 
}

來源

2012-06-15 15:21:53

問題不在於按鈕，問題在於div。由於div是塊元素，它們默認佔用其父元素的全部寬度（作爲一般規則;我敢肯定，如果您在一個文檔中混淆了不同的定位方案會導致某些異常佔據層次中較高元素的全部寬度）。

無論如何，請嘗試將float: left;添加到.button選擇器的規則中。這將導致div類別button適合按鈕周圍，並允許您在同一行上有多個浮動div s，如果您需要更多div.button s。

來源

2012-06-15 15:21:59 JAB

嘗試把

Display:inline;

在CSS。

來源

2012-06-15 15:22:04 Charlie

你真的想要風格<div>？或者您想要設計<input type="button">？

input[type=button] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    /* ... other rules ... */ 
    cursor:pointer; 
} 

input[type=button]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

參見：如果你想後者應該用正確的選擇

來源

2012-06-15 15:24:11 Zeta

一個按鈕CSS樣式：使用<INPUT TYPE =「按鈕>而不是<button>

回答

相關問題