如何用css编写一个证明自己不是机器人按钮的代码
时间: 2023-12-07 14:02:17 浏览: 35
下面是一个简单的 CSS 代码示例,用于创建一个证明自己不是机器人按钮的样式:
```
/* 设置按钮的基本样式 */
.robot-proof-button {
display: inline-block;
margin: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
/* 当鼠标悬停在按钮上时,改变按钮的背景色 */
.robot-proof-button:hover {
background-color: #3e8e41;
}
/* 当按钮被点击时,改变按钮的背景色 */
.robot-proof-button:active {
background-color: #2c682c;
}
/* 为了防止机器人攻击,向按钮添加一个简单的数学问题 */
.robot-proof-question {
display: inline-block;
margin: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
}
```
这个样式将创建一个绿色的按钮,并在其旁边添加一个简单的数学问题,用于验证用户是否为人类。您可以将其应用于您的 HTML 代码中,如下所示:
```
<div>
<button class="robot-proof-button">证明我不是机器人</button>
<span class="robot-proof-question">3 + 5 = ?</span>
</div>
```
当用户单击按钮时,您可以使用 JavaScript 代码来验证用户的答案是否正确,并采取相应的措施,以确定用户是否为人类。