CODEWITHSUNDEEP
javascriptjquerycsshtml
Testing man
Testing man

Reputation: 741

position image/object on button in html

Is it possible to position object/image over button in html? See the image below. The idea is to position object over button, but still make button fully operatable.

<button type="button" class="button">Place image on me</button>

enter image description here

How would I approach this?

Upvotes: 0

Views: 143

Answers (4)

user5964970
user5964970

Reputation:

With the example below you can solve following promlems:

  1. Show image over button which is larger than the button
  2. Let the user click through the image onto the button

<div style="position:relative;">
  <button onclick="alert('Hello');" style="position:absolute;top:30px;">Place image on me</button>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/252px-Red_star.svg.png" style="position:absolute;height:60px;left:40px;pointer-events:none;" />
</div>

You still need to adopt the styles to your needs because all is positioned with fixed pixel values for demo purposes.

Upvotes: 1

Abdul Shakoor Kakar
Abdul Shakoor Kakar

Reputation: 611

You can use image directly in button like this.

<button type="button" class="button">Place image on me <img src="#"/></button>

or use css if you don't want to use any html tag inside button and without resizing button with image.

.button {
    position:relative;
}
.button:before {
    content:"";
    display:block;
    background:url('img.png') no-repeat;
    width:100px;
    height:100px;
    position:absolute;
}

Upvotes: 0

LowMatic
LowMatic

Reputation: 223

You can add images to the button itself by doing this:

<button type="button" class="button"><img src="#"/></button>

But if you will use the image to cover the button with css it won't work.

Upvotes: 0

Harminder
Harminder

Reputation: 141

<button type="button" class="button">Place image on me<img src="your-image.png"></button>

Upvotes: 0

Related Questions