Question

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

alt text

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 Gradients：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 neverthenless）
更简单的例子，可能就是这样你需要： 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" />

如何改变按钮的皮肤

4 个答案: