CODEWITHSUNDEEP
html
user441521
user441521

Reputation: 6988

Image button in html

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.

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

Is there a way to get the button click/release effect but just slap an image inside the button?

Upvotes: 1

Views: 2085

Answers (3)

MMK
MMK

Reputation: 605

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
}

Upvotes: 0

jmore009
jmore009

Reputation: 12923

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

Upvotes: 4

user3522371
user3522371

Reputation: 

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

Upvotes: 1

Related Questions