如何风格提交按钮？

问题描述

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

解决方案

那么，你应该首先了解CSS或层叠样式表。它们用于设计我们的网页。

$ b 是CSS？

• CSS代表级联样式表


• 样式定义如何显示HTML元素


• 将样式添加到HTML 4.0以解决问题


• 外部样式表可以节省大量工作


• 外部样式表存储在CSS文件中

您可以这样对样式进行设置：

  input [type = submit] {
 border-radius：5px; 
 border：0; 
 width：80px; 
 height：25px; 
 font-family：Tahoma; 
 background：＃f4f4f4; 
 / *旧浏览器* / 
背景：-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 + * / 
背景：-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 * / 
} 
  

How to style submit form button? This is possible or I should use the picture(png)? I mean something like this:

解决方案

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.

Just For Instance:

What is 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

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 */
}

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

这篇关于如何风格提交按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！