html - 如何制作带有图像的按钮。（如 facebook）

Question

我有水平宽按钮。

现在我想把透明png放在它的右边缘。

可能吗？？

例如，这个按钮看起来在蓝色按钮的左边缘有一个“f”标记。

 <button type="button" id="sendBy" 
    class="btn mx-auto" 
    style="background-color:rgba(43,162,42,1);
    color:white;
    margin:0px;padding:0px;font-size:0.8rem;width:90%;
    height:40px;border-radius:8px;"> 
    send</button>   

标签： htmlcss

Answer 1

有很多方法，但我喜欢inline-flex在我button的两个孩子身上使用，因为 flex 提供了许多好的属性：

button {
  background-color: rgba(43, 162, 42, 1);
  color: white;
  margin: 0px;
  padding: 0 1rem;
  font-size: 0.8rem;
  width: 90%;
  height: 40px;
  border-radius: 8px;
  
  display: inline-flex;
  align-items: center;
}

.col-text {
  flex-grow: 1;
}

<button type="button" id="sendBy" class="btn mx-auto">
  <span class="col-text">send</span>
  <span>icon</span>
</button>