html - 如何更改按钮的皮肤

Question

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

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/

您可以使用它们相同的属性来设置 textarea 的样式：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" />