Html 如何设置提交按钮的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17236018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style submit button?
提问by user2426362
How to style submit form button? This is possible or I should use the picture(png)? I mean something like this:
如何设置提交表单按钮的样式？这是可能的，还是我应该使用图片（png）？我的意思是这样的：
回答by Mohammad Areeb Siddiqui
Well, You should first know about CSS or Cascading Style Sheets. They are used to style our webpages. Using CSS you can style your button.
好吧，您应该首先了解 CSS 或层叠样式表。它们用于设计我们的网页。使用 CSS，您可以设置按钮样式。
Just For Instance:
举例：
What is CSS?
什么是 CSS？
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
- CSS 代表级联样式表
- 样式定义如何显示 HTML 元素
- 样式被添加到 HTML 4.0 以解决一个问题
- 外部样式表可以节省大量工作
- 外部样式表存储在 CSS 文件中
You can style the button like this:
您可以像这样设置按钮样式：
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 */
}
回答by Abdul Malik
input[type="submit"]{your style here}
回答by MujtabaFR
you can do it using css... In the HTML page you should added
您可以使用 css 来完成...在您应该添加的 HTML 页面中
<input type="submit" value="Send"/>
then , you need to add this text to in the same HTML file on in another css file..
然后，您需要将此文本添加到另一个 css 文件中的同一个 HTML 文件中。
<style>
input[type="submit"]{
/* change these properties to whatever you want */
background-color: #555;
color: #fff;
border-radius: 10px;
}
</style>
Hope that will help you
希望能帮到你
回答by Falguni Panchal
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/
回答by Bladimir Ardiles
you can style the Button as you wish. In the same way as in the previous answers, you can pimp your button selecting it using the input[type="submit"].
您可以根据需要设置按钮样式。与前面的答案相同，您可以使用 input[type="submit"] 拉皮条选择它的按钮。
I would suggest that you take a look to the following link: http://css3button.net/here you will be able to generate automatically the button using many CSS3 properties. According to your cross browsing needs, you can also take a look to http://caniuse.com/to decide if it makes sense to use these properties. Otherwise you can still use a bg picture :-)
我建议您查看以下链接：http: //css3button.net/在这里您将能够使用许多 CSS3 属性自动生成按钮。根据您的交叉浏览需求，您还可以查看http://caniuse.com/以确定使用这些属性是否有意义。否则你仍然可以使用 bg 图片:-)
Regards
问候
回答by underscore
Browsers come with a big set of default styles to make things look pretty if the styles are not set by the website. For example Firefox has the following styles defined for the default submit button:
浏览器带有大量默认样式，如果网站未设置样式，则可以使内容看起来很漂亮。例如，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;
}
回答by Vivek Sadh
You can do it in the following way:-
您可以通过以下方式进行：-
input[type="submit"] {
/*
style code here
*/
}
