准备多组CSS，比如：
.button1{
/*style1*/
}
.button2{
/*style2*/
}
2. 在用JavaScript修改Button的class，把button1改成button2，就实现了指向的CSS样式改变。
主要思路是利用hover来进行功能实现，transition-duration:来实现过度动画；
css这样实现
html如下
.download-block{
width:90%
height:100px
background:#0b0e32
/*margin: 100px auto 0*/
margin:0 auto
position:absolute
left:0
right:0
transition-duration:2s
opacity:0.7
}
.download-block1{
background:transparent
height:100px
overflow:hidden
position:relative
left:0
top:-100px
right:0
padding-top:100px
transition-duration:2s
opacity:0.7
cursor:pointer
}
.download-block1:hover{
padding-top:0
transition-duration:2s
opacity:0.7
}
1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。
2、按钮样式比较多，这样写让代码不整洁，可阅读性差，就要用style标签。
3、<style type="text/css"></style>样式表。style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。
4、把 样式表中的 button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。
5、通过javascript动态修改样式，为了避免用户多次点击提交按钮重复提交信息，在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。
6、修改样式的其他方法：obj.style.cssText = "color:#E1E1E1background-color:black"cssText可以写多个样式样式属性。
7、修改样式的其他方法：obj.setAttribute("class", "style2")直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。
8、修改样式的其他方法：<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>obj.setAttribute("href","css2.css")修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。
![麻烦问一下，这种笔记本电脑的按键[蓝色符号有什么用[？]](/aiimages/%E9%BA%BB%E7%83%A6%E9%97%AE%E4%B8%80%E4%B8%8B%EF%BC%8C%E8%BF%99%E7%A7%8D%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91%E7%9A%84%E6%8C%89%E9%94%AE%5B%E8%93%9D%E8%89%B2%E7%AC%A6%E5%8F%B7%E6%9C%89%E4%BB%80%E4%B9%88%E7%94%A8%5B%EF%BC%9F%5D.png)
