Html 如何更改按钮的外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4343798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change the skin of a button
提问by john
Hello all I'm trying to change the skin (shape) of the button and textArea skin to another one. Some thing like the second picture .
大家好，我正在尝试将按钮和 textArea 皮肤的皮肤（形状）更改为另一个。有点像第二张图。
回答by joni
You've got more than one possibility to do this:
你有不止一种可能性来做到这一点：
Use a Background image (works in every browser, but I personally don't like it to re-edit and save the image file for every small detail again) CSS:
使用背景图像（适用于所有浏览器，但我个人不喜欢重新编辑和保存每个小细节的图像文件）CSS：
button {
background: url('some image..');
width: <width of the background image>;
height: <height of the background image>;
...
}
button:hover {
background: url('mouseover image');
...
}
Alternatively you can use the newer CSS properties to create buttons. They offer everything you want and it is WAY cooler than using background images, but the downside is not many browsers support this fully today (and some will not for a long time, yeah IE, I mean you):
或者，您可以使用较新的 CSS 属性来创建按钮。他们提供你想要的一切，而且比使用背景图片更酷，但缺点是今天没有多少浏览器完全支持它（有些浏览器不会很长时间，是的，IE，我是说你）：
button {
border: solid 1px somecolor;
color: #eee;
border-radius:5px;
-moz-border-radius:5px;
background: -moz-linear-gradient(top, #5E5E5E 0%, #474747 51%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5E5E5E), color-stop(51%,#474747), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
}
button:hover {
color: white;
}
Look here to create CSS Gradients: http://www.colorzilla.com/gradient-editor/
在这里查看创建 CSS 渐变：http: //www.colorzilla.com/gradient-editor/
Impressions and tutorials of what's possible using pure CSS3:
使用纯 CSS3 可能实现的效果的印象和教程：
http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy
http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/(in German, but hey, you'll be able to see the buttons and read the CSS neverthenless)
Simpler example, might be just what you need: http://capturedsparks.com/pure-css3-buttons/
http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy
http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/（在德语中，但是嘿，您将能够看到按钮并阅读CSS）
更简单的例子，可能正是你所需要的：http: //capturedsparks.com/pure-css3-buttons/
You can use them same properties for styling a textarea: border, background, colorfor font color, etc.
您可以使用它们相同的属性来设置 textarea 的样式：border, background,color字体颜色等。
回答by demas
<button type="submit" style="border: 0; background: transparent">
<img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>
回答by Lobo
You can apply an style to the bottom or submit HTML tag, like:
您可以将样式应用到底部或提交 HTML 标签，例如：
<input type="submit" class="mybotton" value="Continue" />
In this way you can add a background image:
通过这种方式，您可以添加背景图像：
.mybotton{
background-image: url(buttonimage.png);
}
Regards!
问候！
回答by Anish Joseph
if u want exactly the same design u described above then just use this
如果你想要与上面描述的完全相同的设计，那么就使用这个
<input type="image" src="submitbutton.png" />
