0

I'm trying to put an image inside a button like this: example

The code I have so far is:

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

3 Answers 3

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;
}
<button class="buttoni">Earn Money Helping <b>People</b> 
</button>

Sign up to request clarification or add additional context in comments.

Comments

0

You can try this:

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

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.

Comments

0

Well, if you want to do it using 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>

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: 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 */
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.