8

如何设置提交表单按钮的样式？这是可能的还是我应该使用图片（png）？我的意思是这样的：

在此处输入图像描述

4

7 回答 7

15

好吧，您应该首先了解 CSS 或级联样式表。它们用于为我们的网页设计样式。使用 CSS，您可以设置按钮样式。

仅举例：

什么是 CSS？

  • CSS 代表级联样式表
  • 样式定义如何显示 HTML 元素
  • 样式被添加到 HTML 4.0 以解决一个问题
  • 外部样式表可以节省大量工作
  • 外部样式表存储在 CSS 文件中

您可以像这样设置按钮的样式：

input[type=submit] {
    border-radius: 5px;
    border: 0;
    width: 80px;
    height:25px;
    font-family: Tahoma;
    background: #f4f4f4;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f4f4), color-stop(100%, #ededed));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4f4f4 1%, #ededed 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f4f4f4 1%, #ededed 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ededed', GradientType=0);
    /* IE6-9 */
}

http://jsfiddle.net/mareebsiddiqui/jGVa3/1

于 2013-06-21T13:17:08.857 回答
5

您可以使用 css 来完成...在您应该添加的 HTML 页面中

<input type="submit" value="Send"/>

然后，您需要将此文本添加到另一个 css 文件中的同一个 HTML 文件中。

<style>
input[type="submit"]{
    /* change these properties to whatever you want */
    background-color: #555;
    color: #fff;
    border-radius: 10px;
}
</style>

希望对你有帮助

于 2013-06-21T13:22:54.273 回答
4 
input[type="submit"]{your style here}
于 2013-06-21T13:08:07.237 回答
2 
try this 
    .button {
      -moz-border-radius: 25px;
      -moz-box-shadow: #6E7849 0px 0px 10px;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -webkit-border-radius: 25px;
      -webkit-box-shadow: #6E7849 0 0 10px;
      -webkit-transition: all 0.5s ease;
      background-color: #6E7849;
      background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
      background-image: linear-gradient(90deg, #B9C788, #6E7849);
      border-radius: 25px;
      border: 2px solid #4a5032;
      box-shadow: #6E7849 0px 0px 10px;
      color: #ffffff;
      display: inline-block;
      font-size: 4em;
      margin: auto;
      padding: 15px;
      text-decoration: none;
      text-shadow: #000000 5px 5px 15px;
      transition: all 0.5s ease;
    }

    .button:hover {
      padding: 15px;
    }

OR 
try your choice color combination button
http://www.cssdrive.com/css3button/
于 2013-06-21T13:11:25.003 回答
1

浏览器带有一大组默认样式，如果网站未设置样式，则可以使它们看起来很漂亮。例如，Firefox 为默认提交按钮定义了以下样式：

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}
于 2013-06-21T13:09:09.750 回答
1

您可以通过以下方式进行操作：-

input[type="submit"] {

/*

style code here 

*/
}
于 2013-06-21T13:10:21.490 回答
1

您可以根据需要设置 Button 的样式。与前面的答案一样，您可以使用 input[type="submit"] 来选择按钮。

我建议您查看以下链接：http ://css3button.net/在这里您将能够使用许多 CSS3 属性自动生成按钮。根据您的交叉浏览需求，您还可以查看http://caniuse.com/以确定使用这些属性是否有意义。否则你仍然可以使用背景图片:-)

问候

于 2013-06-21T13:21:26.193 回答