CODEWITHSUNDEEP
htmlcss
Réka
Réka

Reputation: 1

Image as a button

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

Upvotes: 0

Views: 167

Answers (4)

Mai
Mai

Reputation: 338

Try this instead of button:

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

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

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>

Upvotes: 1

kurideja
kurideja

Reputation: 208

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

I have some suggestions:

  1. You can set background-image property on button.
  2. 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.

Upvotes: 0

Mihai8
Mihai8

Reputation: 3147

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.

Upvotes: 0

Related Questions