Question

我试图将图像放在按钮内：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>

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

Answer 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，我建议将样式放入样式表而不是内联。

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

不要在按钮内调用div，因为它是一种错误的形式，因为按钮支持默认插入图像

如果您想使用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 */
}

如何将图像放在按钮内？仅使用html和css

3 个答案: