Make HTML button same size as its background

Question

Usually, you make a button with a given size:

<button style="width: 120px; height: 40px;">
Mememe
<button>

Then you add a background which is the same size as the button:

button
{
    background-size: 100% 100%;
}

Obviously, if you want it to be 1:1, the image should be 120x40 px too.

But is there a way to make the button same size as the image is? (With neither IMG elements nor scripts).

Regards,

score 1 · Accepted Answer · answered Jan 21 '12 at 12:19

1

No, not by using only HTML and CSS. It is, however, possible by using either PHP (or some other server-side scripting language) or JavaScript

answered Jan 21 '12 at 12:19

Tom

3,450
22
31

score 1 · Answer 2 · answered Jan 21 '12 at 12:40

One way might be to get the size of the loaded image, using JavaScript, and then apply the appropriate style on your button:

var width = document.images[0].width;
var height = document.images[0].height;
var button = document.getElementById('button-id');
button.style.width = width;
button.style.height = height;

Make HTML button same size as its background

2 Answers2