如何使CSS按鈕正常工作？

我創建了一個CSS框來替換我的網站上的浮動（滑動）側邊欄圖像.jpg橫幅，該橫幅位於博主上。但是，CSS按鈕不能正常工作，因爲它應該工作。如何使CSS按鈕正常工作？

創建實際代碼[工作正常]：

<html> 
<head> 
<style> 
div { 
    background-color: white; 
    width: 300px; 
    border: 3px solid #008CBA; 
    padding: 25px; 
    font-size: 35px; 
    margin: 25px; 
} 
.button { 
    background-color: #008CBA; 
    border-radius: 6px; 
    border: none; 
    color: white; 
    padding: 10px 10px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 20px; 
    margin: 4px 2px; 
    width: 180px; 
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s; 
    cursor: pointer; 
} 
.button { 
    background-color: #008CBA; 
    color: white; 
    border: 2px solid #008CBA; 

} 
.button:hover { 
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA; 
</style> 
</head> 
<body> 

<div><center><font color="red">Earn Upto $500 per month !!!!</font> 
<br /> 
<p style="font-size:20px">Best sites in the world that pay up to $10 per study.</p> 

<a class="button" href="http://www.genuineonlinefreejobs.com/2015/04/top-10-genuine-paid-online-jobs-survey-panels.html" target="_blank" title="Click here to start making money - No Registration fees!!!">LEARN MORE</a> 

<br /> 
<p style="font-size:8px">* Opportunities & earnings will vary depending on your Geo location</p> 
</center> 
</div> 
</body> 
</html>

代碼編輯在Blogger工作：CSS按鈕看起來像一個鏈接]

<div id='genuinesurvey'> 
<style> 
.box { 
    background-color: white; 
    width: 250px; 
    border: 3px solid #008CBA; 
    padding: 25px; 
    font-size: 35px; 
    margin: 25px; 
} 
.button { 
    background-color: #008CBA; 
    border-radius: 6px; 
    border: none; 
    color: white; 
    padding: 10px 10px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 20px; 
    margin: 4px 2px; 
    width: 180px; 
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s; 
    cursor: pointer; 
} 
.button { 
    background-color: #008CBA; 
    font-color: white; 
    border: 2px solid #008CBA; 
} 
.button:hover { 
    background-color: white; 
    font-color: black; 
    border: 2px solid #008CBA; 
} 
</style> 
<div class="box"><center><font color="red">Earn Upto $500 per month !!!!</font> 
<br /> 
<p style="font-size:20px">Best sites in the world that pay up to $10 per study.</p> 

<div class="button"><a href="http://www.genuineonlinefreejobs.com/2015/04/top-10-genuine-paid-online-jobs-survey-panels.html" target="_blank" title="Click here to start making money - No Registration fees!!!">LEARN MORE</a></div> 
<br /> 
<p style="font-size:8px">* Opportunities & earnings will vary depending on your Geo location.</p> 
</center> 
</div> 
<style> 
#genuinesurvey { 
    position: relative; 
} 
</style> 
</div>

來源

2016-09-17 Tamil Arasan

當我測試的兩種代碼摘錄我可以告訴的唯一不同是按鈕內部的文本，說你應該更清楚地說明，然後說你的按鈕不能正常工作。要解決文本問題，只需將其添加到您的代碼：

a { 
    text-decoration:none; 
    color:white; 
} 
a:hover { 
    color:black; 
}

希望這會有所幫助。

來源

2016-09-17 16:45:31 Joshua

嗨，謝謝。你是對的，我的意思是按鈕工作正常，但其中的文本不能正常工作。我已經添加了你在css部分所說的代碼。下劃線只消失，但顏色保持不變，就像鏈接一樣。當我徘徊白色不變爲黑色。相反，它始終保持藍色。 –

剛剛在我的文章中編輯代碼，讓我知道如果這項工作 – Joshua

謝謝。它的作品完美，當我檢查它。但是當我將它添加到我的網站時，它仍然不能正常工作。字體不會以白色顯示，也不會像鏈接那樣展開下劃線。請看看我的網站，我已將它添加到我的網站。請告訴我一個解決方案，如果可以的話，看起來是正確的。 –

如何使CSS按鈕正常工作？

回答

相關問題