Question

我创建了一个CSS框来替换我的网站上托管在博客上的浮动（滑动）侧边栏图像.jpg横幅。但是，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>

编辑代码以使用博客：[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>

Answer 1

当我测试两个代码摘录时，我唯一能说的是不同的是按钮内的文字，说你应该更清楚地说明你的按钮不能正常工作。要修复文本问题，只需将其添加到您的代码中：

array([ 17.21,  33.4 ,  24.39,   3.48,   1.02,   0.61,  18.03,   1.84])

希望这有帮助。

如何使CSS按钮正常工作？

1 个答案: