带有图像的样式按钮？

Question

我一直在尝试使用图像来设计提交按钮的样式。我会使用 CSS，但按钮的设计太复杂了。我尝试将背景图像添加到按钮，但图像位置不正确。我也尝试过使用

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

但是，唉，这不是提交按钮，所以它不起作用。我已经查看并尝试了所有我认为可能的方法，但找不到使按钮提交表单的解决方案。谢谢。

原文由 Dragan Marjanovic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

提交按钮有不同的可能性：

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

这些都是提交按钮。选择最适合您的那个。

现在您可以选择在按钮之间放置图像或使用背景图像并正确放置它们。

带有背景图像的按钮示例：

 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>

（或作为 小提琴）

原文由 Christoph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果 <input type="image"> 没有按预期工作只是尝试

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

但正如我在上面的评论中所写，您的代码也应该可以正常工作

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 4.0 许可协议