如何使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按钮正常工作？

回答

相关问题