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
}
你按钮上都没写class类怎么用.button来控制这个按钮的样式呢你可以用 input[type="button"] {}来选择这个所有的<input type="button" >这些按钮
或者你还想用上面的那种写法,你可以这么改
<input type="button" class="button" name="caigou" id="caigou" value="采购" style="width:50pxheight:50px"/>
<input type="button" class="button" name="xiaoshou" id="xiaoshou" value="销售" />
给每个按钮加上一个button的类这样你就可以用 .button 来控制了
或则楼上的说法也可以,虽然有点烦,按钮的另一种写法是<button>销售</button>如果是这样写的话,就直接用 button{}来控制这个按钮的样式