要解决按钮内旋转器颜色不正确的问题,可以使用以下代码示例:
HTML:
CSS:
.btn {
position: relative;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 3px solid #fff;
border-top-color: #f00; /* 设置旋转器颜色为红色 */
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
在上述代码中,我们使用了一个按钮元素,其中包含了一个旋转器。使用CSS设置按钮的样式,设置旋转器的样式,并为旋转器添加了一个旋转的动画。需要注意的是,我们通过设置border-top-color
属性来设置旋转器的颜色为红色。
你可以根据自己的需求修改按钮和旋转器的样式,以满足你的具体需求。
下一篇:按钮内嵌元素无法被点击。