How To Put An Image Inside A Button? Using Html And Css Only

I'm trying to put an image inside a button like this: example The code I have so far is:

Solution 1:

You could create the icon using CSS instead. This would allow you to apply transitions / animations etc.

.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;
}

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

Solution 2:

You can try this:

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

Adjust the height as needed for the image.

Are you just trying to learn HTML/CSS, I'd suggest putting the styling into a stylesheet rather than inline.

Solution 3:

Well, if you want to do it using html

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

Do not call div inside button because it is an erroneous form, since the button supports the insertion of images by default

In case you want to do it using CSS

This should do do what you want, assuming your button image is 16 by 16 pixels.

.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: 0px0px;  /* 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 */
}