将span元素放在buttton的标题CSS上

Question

我有一个带有跨度的按钮，它代表一个微调器

<button>
  Confirm
  <span class="spinner"></span>
</button>

所以现在看起来像这样：

我希望微调框出现在“ CONFIRM”一词的上方，我尝试使用position属性进行了很多尝试，但是没有成功，如何在CSS的帮助下进行修复？

Answer 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>

Answer 2

您可以使用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>

Answer 3

您可以创建一个具有伪元素作为微调器的按钮。您可以通过删除按钮上的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>