一个可复制易维护的按钮

发表于   |   分类于   |  

设计一个按钮，

  1. 只需改变字体大小，其他的宽高，阴影大小，圆角半径等都会随之改变，而不用一个个修改
  2. 只需改变背景颜色，边框颜色，阴影颜色随之改变，不用一一修改
.button a {
  display: block;
  font-size: 1em;
  text-decoration: none;
  color: black;
  padding: .3em .8em;
  line-height: 2;
  border-radius: .4em;
  border: .07em solid rgba(0,0,0,.1);
  box-shadow: .07em .28em .21em rgba(0,0,0,.5);
  text-shadow: 0 -.06em .06em rgba(0,0,0,.5);
  background: linear-gradient(to right bottom, hsla(0,0%,100%,.3), transparent);
  background-color: gold;
}
  • 要想其他性质随字体大小改变只需将其他性质的数值改为相应的 em 为单位的值，行高也可以设为单纯的数字，那也是字体大小的倍数
  • 边框，字体倒影，盒子倒影，都设为半透明的黑色，这样背景色改变时也可以搭
  • 渐变色设为半透明的白色渐变到完全透明