如何将图像放入按钮中？仅使用 html 和 css答案

【问题标题】：how to put an image inside a button? using html and css only如何将图像放入按钮中？仅使用 html 和 css
【发布时间】：2018-04-06 01:27:19
【问题描述】：

我正在尝试将图像放入这样的按钮中：example

我目前的代码是：

<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b> <div><img src="img/pla.png" style="width: 25px; height: 25.7px; margin-left: 220px; margin-top: -50px;"> </div></button>

【问题讨论】：

标签： html css

【解决方案1】：

您可以改为使用 CSS 创建图标。这将允许您应用过渡/动画等。

.buttoni {
  width: 270px;
  height: 46.9px;
  position: relative;
  transition: .2s ease-in-out;
  cursor: pointer;
  border: 0;
}

.buttoni:before,
.buttoni:after {
  position: absolute;
  content: '';
  transition: .2s ease-in-out;
}

.buttoni:before {
  background: #29d4a2;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  right: 15px;
  top: 10px;
}

.buttoni:after {
  width: 0;
  height: 0;
  display: block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #FFF;
  transform: rotate(-90deg);
  right: 20px;
  top: 19px;
}

.buttoni:hover {
  background: #29d4a2;
}

.buttoni:hover:before {
  background: blue;
}

<button class="buttoni">Earn Money Helping <b>People</b> 
</button>

【讨论】：

【解决方案2】：

你可以试试这个：

<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b><img src="img/pla.png" style="position: relative; float: right; width: 25px;"></button>

根据需要调整图像的高度。

您只是想学习 HTML/CSS，我建议将样式放入样式表而不是内联。

【讨论】：

【解决方案3】：

好吧，如果你想用 html 来做的话

<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b><img src="img/pla.png" style="width: 25px; height: 25.7px; margin-left: 220px; margin-top: -50px;"></button>

不要在button内部调用div，因为它是错误的形式，因为button默认支持插入图片

如果你想用 CSS 来做

假设您的按钮图像为 16 x 16 像素，这应该可以满足您的需求。

.buttoni {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

【讨论】：