button样式需要注意的有几点：
1、建议有一个最小宽度，以免在文字很少时使得按钮过于窄，宽高不协调；
2、建议有一个padding，以免内部文本显得过于拥挤；
2、hover时需要有颜色变化，以告诉用户这是一个可交互元素，更为灵动；
3、获得焦点时应与hover时的效果一致，释放焦点时则回到普通效果。
4、获得焦点时的outline建议去掉，否则较为难看。
普通状态样式设置：.btn{
min-width: 60px
padding: 5px 8px
background: #fff
color: #4daff9
border: 1px solid #4daff9
}
交互状态(hover、focus)样式设置：.btn:hover{
color: #fff
background: #0a90f5
}
.btn:focus{
color: #fff
background: #0a90f5
outline: none
}
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.changeColor2Pink{
background-color: pink
}
.resetBtn1Color{
background: none
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn1=document.getElementById("btn1")
var btn2= document.getElementById("btn2")
btn1.onclick = function () {
btn1.className="changeColor2Pink"
}
btn2.onclick = function () {
btn1.className = "resetBtn1Color"
btn2.className = "changeColor2Pink"
}
}
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</body>
</html>
