CODEWITHSUNDEEP
htmlcssforms
Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

Styling buttons with images?

Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using

<input type="image" src="myimage.png">

But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.

Upvotes: 5

Views: 21477

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

if <input type="image"> doesn't work as expected just try instead

<button type="submit"><img src="myimage.png"></button>

but as I wrote in the comment above your code should work fine too

Upvotes: 5

Christoph
Christoph

Reputation: 51201

You have different possibilities for a submit button:

<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->

These are all submit buttons. Pick the one, which suits you best.

Now you can choose to put an image between the button or use background-images and position them properly.

Example for button with background-image:

button {
  background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
  padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>

(Or as a fiddle)

Upvotes: 3

Sol
Sol

Reputation: 265

In case someone needs a newer html5 good answer:

<button id='' name=''  value='' ><img src='img.jpg' /></button>

Upvotes: 2

Robert Kajic
Robert Kajic

Reputation: 9077

Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css. 

<button type='submit'>Informative submit text</button>

button {
    background-image:url('myimage.png');
}

Upvotes: 2

Idrizi.A
Idrizi.A

Reputation: 12020

<input type="image" src="myimage.png">

or

<input type="submit" style="background:url(myimage.png)">

Upvotes: 0

Related Questions