0

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Testing man
  • 677
  • 1
  • 12
  • 28
  • Why would you want to do something like that? What have you tried? – Ionut Necula Jan 10 '17 at 22:15
  • Add img tag inside where text is. – Harminder Jan 10 '17 at 22:21
  • Lonut, just creating simple game application on my html. tried with span – Testing man Jan 10 '17 at 22:25
  • Harminder. Thank you. The problem is, the image resizes the button. I would like to see that button size would stay the same, however image would go over button size. – Testing man Jan 10 '17 at 22:26
  • Possible duplicate of [HTML/CSS: Make a div “invisible” to clicks?](http://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks) which demonstrates using CSS [pointer-events: none](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events). For this example it would be used on the image. – traktor Jan 11 '17 at 00:10
  • Possible duplicate of [HTML/CSS: Make a div "invisible" to clicks?](http://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks) – lmiguelvargasf Jan 11 '17 at 02:51

4 Answers4

1

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.

0
<button type="button" class="button">Place image on me<img src="your-image.png"></button>
Harminder
  • 141
  • 1
  • 8
0

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.

LowMatic
  • 223
  • 2
  • 13
  • Thanks for reply. Problem is because button resizes with the image, which I would not like to see. – Testing man Jan 10 '17 at 22:28
  • It all depends on what you are trying to achieve, maybe this will help http://stackoverflow.com/questions/796087/make-a-div-into-a-link – LowMatic Jan 10 '17 at 22:33
0

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;
}
Abdul Shakoor Kakar
  • 611
  • 12
  • 23