按钮组件的写法及其注意事项

1、在html中写出满足需求的按钮

<a class="btn btn-default btn-block">免费注册</a>

2、我们先写出按钮的通用样式也就是公共样式

.btn { border: 1px solid transparent; border-radius: 4px; color: #ffffff; text-align: center; padding: 10px 0; }

3、接下来写一下个性样式也就是.btn-default的样式

.btn.btn-default { background-color: #8d8fa0; border-color: saturate(#8d8fa0 5%); }

个性样式中我们改变了原有的背景颜色及其边框颜色，我们可以根据设计的需求定义不同的背景及其颜色 4、.btn-block也是个性样式之一这里我们设置的是宽度100%。

.btn.btn-block { display: block; width: 100%; }

到这里灰色按钮就完成了其中注意事项如下： 公共的属性一定要写到btn中以便于更改个性属性时前者不受影响