我有一个带有跨度的按钮,它代表一个微调器
<button>
Confirm
<span class="spinner"></span>
</button>
所以现在看起来像这样:
我希望微调框出现在“ CONFIRM”一词的上方,我尝试使用position
属性进行了很多尝试,但是没有成功,如何在CSS的帮助下进行修复?
答案 0 :(得分:1)
.confirm {
height:40px;
text-align:left;
position:relative;
}
.confirm .spinner {
display:block;
background-image: url(https://accountportal.cdph.ca.gov/images/loader.gif);
background-size: cover;
position:absolute;
width:20px;
height:20px;
border-radius : 50%;
right:0px;
top:0;
bottom:0;
left:0;
margin:auto ;
}
<button class="confirm">
Confirm <span class="spinner"></span>
</button>
答案 1 :(得分:0)
您可以使用position:absolute和left
.confirm {
width:100px;
height:60px;
text-align:center;
position:relative;
}
.spinner{
position:absolute;
left:33px;
content:'';
display:block;
background:red;
position:absolute;
width:20px;
height:20px;
border-radius : 50%;
top:0;
bottom:0;
margin:auto 0;
}
<button class="confirm">
Confirm
<span class="spinner"></span>
</button>
答案 2 :(得分:-1)
您可以创建一个具有伪元素作为微调器的按钮。您可以通过删除按钮上的showProgress
类来添加或删除进度图标。这是示例
旋转按钮只是通过使用按钮伪元素来覆盖按钮文本
.showProgress::after {
content: "";
height: 12px;
width: 12px;
border: 3px solid #0000ff4d;
border-left: 3px solid #0039ff;
background: transparent;
animation: borderSpin 1s linear infinite;
position: absolute;
border-radius: 100%;
margin-left: -39px;
}
.spinnerButton {
border: 1px solid #ccc;
background: white;
height: 30px;
width: 70px;
}
@-webkit-keyframes borderSpin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes borderSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<button class="spinnerButton showProgress" >CONFIRM</button>