Image as a button

Question

I am working on a HTML page and I would like to use an image as a button. My problem is that it shows the button in gray colour and the image I want to use as the background of it is smaller and the whole button is in another position. I link two images, the first one shows how it should look like and the second one is what I managed to do.

Could you please help me what's wrong (I am a beginner, sorry if it is a very simple issue and the solution is easy...)?

The code in HTML is:

<button type="image" name="in_cart">
    <img src="pic/in_cart.png">
</button>

With this the image - without making it act like a button - is in the right position, but as a button it shows the state in the second image

CSS:

#in_cart {
   position:absolute;
   top:165px;
   left:600px;
   width: 300px;
   height: 35px;
}

Here is what you are looking for possible answers: [http://stackoverflow.com/questions/15461317/button-background-image](http://stackoverflow.com/questions/15461317/button-background-image) — Mardzis, Jan 02 '15 at 12:38

jbutler483 · Answer 1 · 2015-01-02T12:58:28.473

1

You can use the background Image within your css file:

button{
  height:300px;
  width:200px;
  background-image: url(https://placekitten.com/g/200/300);
  background-repeat: no-repeat;
  color:red;
  }

<button>I'm a button!!!!</button>

IMO:

I would create an <a> element, and style it accordingly (instead of using an image, use css to 'create' your image):

a{
  
  height:100px;
  width:200px;
  background:black;
  padding:10px;
  border-radius:20%;
  color:gold;
  text-decoration:none; 
  font-family:times;
  }

<a href="#">I'm your styled link</a>

edited Jan 02 '15 at 12:58

answered Jan 02 '15 at 12:51

jbutler483

24,074
9
92
145

1

This should be the correct way to style button using css instead of using image, since the image button is simple. – maskie Jan 02 '15 at 15:20
css is extremely powerful and hence should be used for this (esp. as it can reduce element counts). – jbutler483 Jan 02 '15 at 15:22
It will also remove another request to fetch the image, and save a few hundred bytes in transferring the image, and hence making the page load faster. It is also better for responsive design and can change the width and height of the button according to screen width. – maskie Jan 02 '15 at 15:28

score 0 · Answer 2 · answered Jan 02 '15 at 12:47

0

You can use

<input type="image" src="pic/in_cart.png" name="in_cart" width="300" height="35">

After that you can add others properties with CSS.

answered Jan 02 '15 at 12:47

Mihai8

3,113
1
21
31

score 0 · Answer 3 · edited Jan 02 '15 at 13:24

0

Try this instead of button:

<input type="image" name="in_cart" src="pic/in_cart.png">

edited Jan 02 '15 at 13:24

helloflash

2,457
2
15
19

answered Jan 02 '15 at 12:50

Mai

363
3
16

score 0 · Answer 4 · answered Jan 02 '15 at 12:50

(P.S. In CSS, #in_cart selects element by id, not name.)

I have some suggestions:

You can set background-image property on button.
You can set button position as relative and its image as absolute with top, bottom, left and right properties set to 0.

Here is the code for second option:

HTML:

<button type="image" name="in_cart">
    <img src="pic/in_cart.png">
</button>

CSS:

[name="in_cart"] {
    position: relative;
}

[name="in_cart"] > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

You can as well wrap the image in tag, see user3281326 answer.

And I suggest not to set position absolute for a button. You may want to place it in various locations in your code later or such... I suggest wrapping it in a separate <div>, because positioning on website is grid's responsibility.

Image as a button

4 Answers4