“`html
<button class=”btn btn-primary btn-block”>点击偶</button>
“`css
.btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
.btn:hover {
background-color: #3e8e41;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
.btn:active, .btn:focus {
background-color: #3e8e41;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
.btn-block {
display: block;
width: 100%;
height: 100%;
background-color: #fff;
padding: 12px 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
.btn-block:hover {
background-color: #4CAF50;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
.btn-block:active, .btn-block:focus {
background-color: #4CAF50;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
这段代码创建了一个红色的“点击偶”按钮,并在其周围添加了柔和的白色发光效果。当用户鼠标悬停在按钮上时,按钮的颜色会变成白色,并在周围添加柔和的发光效果。当用户点击按钮时,按钮的颜色和发光效果会根据鼠标的移动情况而变化。