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

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中以便于更改个性属性时前者不受影响