如何更改按钮的皮肤

Question

大家好，我正在尝试将按钮和文本区域皮肤的皮肤（形状）更改为另一种。有点像第二张图。

Answer 1

您有不止一种可能性可以做到这一点：

使用背景图像（适用于每个浏览器，但我个人不喜欢它再次重新编辑并保存每个小细节的图像文件）
CSS：

button {
  background: url('some image..');
  width: <width of the background image>;
  height: <height of the background image>;
  ...
}

button:hover {
  background: url('mouseover image');
  ...
}

或者，您可以使用较新的 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;
}

看这里创建 CSS 渐变： http://www.colorzilla.com/gradient-editor/

印象和教程可以使用纯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/
  （德语，但是嘿，你将能够
  查看按钮并阅读 CSS
  尽管如此）

• 更简单的例子，可能就是这样
  你需要：
  http://capturedsparks.com/pure-css3-buttons/

您可以使用它们相同的属性用于设置文本区域的样式：border、background、color 字体颜色等。

Answer 2

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>

Answer 3

您可以在底部应用样式或提交 HTML 标签，例如：

<input type="submit" class="mybotton" value="Continue" />

这样您就可以添加背景图片：

.mybotton{
    background-image: url(buttonimage.png);
}

问候！

Answer 4

如果你想要与上面描述的完全相同的设计，那么就使用这个

<input type="image" src="submitbutton.png" />