如何更改按鈕中的文本顏色

Question

我想將“新服務請求”的按鈕文本更改為白色。 請指教。

 .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; } .btn-info:hover{ background: #003366; transition: 0.5s background;}

 <button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 1

您只需要定位.button-info a即可將文本顏色更改為白色。

 <style> .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; } .btn-info a, .btn-info:hover { color: white; } .btn-info:hover{ background: #003366; transition: 0.5s background;} </style> <button class="btn-info"> <a href="LINK">New Service Request</a></button>

還值得注意的是，您的 HTML 無效，嵌套結構<button><a></a></button>不被接受，並且可以通過標記驗證服務進行檢查。 請參閱以下錯誤：

錯誤：元素a不得作為button元素的后代出現。

您的代碼的有效且更簡潔的版本如下：

 <style> .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; color: white; } .btn-info:hover { background: #003366; transition: 0.5s background; cursor: pointer; } </style> <input type="button" class="btn-info" onclick="location.href='http://google.com';" value="Google" />

Answer 2

您需要將按鈕內 a 標簽的顏色設置為白色。

例子：

 .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; } .btn-info:hover { background: #003366; transition: 0.5s background; } .btn-info a { color: white; }

 <button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 3

將您的課程button-info更改為白色您可以執行以下操作。 希望能幫助到你

 .btn-info { background: #0066cc; border: none; border-radius: 5px; font-size: 14px; padding: 10px 10px; } .btn-info a { color: #fff; text-decoration: none; } .btn-info:hover{ background-color: #003366; }

 <button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 4

完全刪除 a 標簽，並為按鈕的懸停狀態提供cursor: pointer的規則：

 .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; color: #fff; } .btn-info:hover { background: #003366; transition: 0.5s background; cursor: pointer; }

 <button class="btn-info">New Service Request</button>

Answer 5

試試這個

 .btn-info { font-size: 13px; color:green; } <button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 6

您應該針對內部 .button-info 類來更改文本的顏色。

Answer 7

try this code: 

    .btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

    .btn-info:hover{
    color: #fff;
    background: #003366; 

    transition: 0.5s background;}



    <button class="btn-info" href="LINK">New Service Request</button>