Image button in html

Question

I\'m trying to get a button that has an image on it. I\'ve seen stuff like the following but they don\'t give you the button press/release effect that a normal button does.

Answer 1

If you want to do it with the input button you can try this code:

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />

and your css will look like this:

#saveform {
    outline: none; //To remove the blue outline ( the blue line ) when the focus event occurs
}
#saveform:active {
    transform: scale(0.9,0.9);
}

However if you do not want to try the with the input tag, you can use this code:

Html:

<button id="saveform"  type="submit" value="Submit">Submit</button>

CSS:

#saveform{
  background-image: url("SourceOfYourImage");
  height: 50px; // Any value
  width: 100px; //  Any value
}

Answer 2

Yes there is, by applying a background-image to the button like so:

HTML

<button>Click Me</button>

CSS

button{
  background-image: url("YourImageHere");
  color: #FFF; //random values
  height: 50px; //random values
  width: 100px; //random values   
}

FIDDLE

Answer 3

.yourButton{
    background:url("logg.png") no-repeat;
    border:none;
    cursor:pointer;
    width:40px;
    height:10px;
}