Home/ Questions/Q 7873063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T02:24:02+00:00

Ive been trying to style a submit button using an image. I would use

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0