Question

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

enter image description here

Answer 1

嗯，您应该首先了解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

Answer 2

input[type="submit"]{your style here}

Answer 3

你可以用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>

希望能帮到你

Answer 4

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/

Answer 5

如果网站没有设置样式，浏览器会提供大量默认样式以使事物看起来很漂亮。例如，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;
}

Answer 6

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

input[type="submit"] {

/*

style code here 

*/
}

Answer 7

您可以根据需要设置Button的样式。以与上一个答案相同的方式，您可以使用输入[type =“submit”]对您的按钮进行选择。

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

此致

如何设置样式提交按钮？

7 个答案: