代码如下:
<!doctype html><html><head><meta charset="utf-8"><title>自定义按钮样式</title></head><style>.btn{background-color:gray; /* Green */border: none;padding: 8px 30px;text-align: center;text-decoration: none;display: inline-block;font-size: 12px;border-radius: 5%;}.btn-hong{background: #EC2F32;color: white;}.btn-lan{background: #5897F8;color: white;}.btn-cheng{background: #FF9E00;color: white;}</style><body><div style="background: #BDBCBC;height: 35px;"><button class="btn btn-hong">红</button><button class="btn btn-lan">蓝</button><button class="btn">灰</button><button class="btn btn-cheng">橙</button></div></body></html>
效果图:
要善于用公共样式对重复属性进行编辑,然后对按钮进行单独编辑,Bootstrap插件就是这样对按钮进行编辑的