如何给按钮(button)设置样式？

在web开发中，按钮是一个常用的控件，原生的按钮是没有样式的，比较丑。那么怎么给按钮设置样式呢？本文盘点了几种方式供大家参考！

操作方法

（01）首先创建一个txt文件，修改后缀名：把改为，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式！

（02）CSS：style属性设置。如下代码所示：按钮的样式是不是好看多了，在其他浏览器也会一样的显示这个效果。注：如果按钮样式比较少、样式只对该按钮有效，那么就可以用style属性。如下图代码所示，该按钮样式比较多，这样写让代码不整洁，可阅读性差，那么怎么解决这个问题呢，这就要用style标签了！

（03）CSS：<style type="text/css"></style>样式表。如下代码所示：style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。注：如果希望这个页面所有的按钮(button)都使用这个

（04）CSS：<style type="text/css"></style>样式表 加 class属性。如下代码所示：注意看到代码的变化，我们把 样式表中的  button{}改成了_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。注：这是开发中比较常用的添加样式的方式，我们可以对需要添加样式的按钮指定一个样式。

（05）JS：通过javascript动态修改样式。如下代码所示：很多适合我们需要动态的改变样式，比如用户提交个人信息的适合，为了避免用户多次点击提交按钮重复提交信息，我们可以在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。

（06）JS：修改样式的其他方法：ext = "color:#E1E1E1;background-color:black;";cssText可以写多个样式样式属性。如下面代码：

（07）JS：修改样式的其他方法：ttribute("class", "style2");直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。如下面代码：

（08）JS：修改样式的其他方法：<link href="" rel="stylesheet" type="text/css" id="css"/>ttribute("href","");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新！如下面代码：