CSS不同颜色按钮实例

CSS减少代码重复技巧非常多，以主要包含采用相对尺寸、半透明颜色的实例来说明CSS减少代码重复技巧的一些运用。

以下为通过CSS代码实现的一个“Yes!”按钮效果以及相应的代码：

  <span class='basisButton'>
    Yes!
  </span>　

与之组合的CSS代码：

    .basisButton {
      padding: 6px 16px;
      border: 1px solid #446d88;
      background: #58a linear-gradient(#77a0bb, #58a);
      border-radius: 4px;
      box-shadow: 0 1px 5px gray;
      color: white;
      text-shadow: 0 -1px 1px #335166;
      font-size: 20px;
      line-height: 30px;
    }　　

#相对尺寸的使用

行高是字号的1.5倍，可以修改为：

      font-size: 20px;
      line-height: 1.5em;

字号也可以根据父元素字号修改为相对尺寸：

      font-size: 1.25em; /* 假设父级元素字号为16px*/
      line-height: 1.5em;　

将padding、border-radius、box-shadow以及text-shadow值也根据字号为基准修改为相对尺寸：

    .basisButton {
      padding: .3em .8em;
      border: 1px solid #446d88;
      background: #58a linear-gradient(#77a0bb, #58a);
      border-radius: .2em;
      box-shadow: 0 .05em .25em gray;
      color: white;
      text-shadow: 0 -.05em .05em #335166;
      font-size: 125%;
      line-height: 1.5;
    }

　　

此处边框宽度并未修改，是因为放大后，按钮的边框粗细不随着放大保持在1px效果较好。

#半透明颜色的使用

颜色是另一个重要的变数。比如，假设我们要创建一个红色的取消按钮，或者一个绿色的确定按钮，该怎么做呢?眼下，我们可能需要覆盖四条声明(border-color、background、box-shadow 和 text-shadow)，而且还有另一大难题：要根据按钮的亮面和暗面相对于主色调 #58a 变亮和变暗的程度来分别推导出其他颜色各自的亮色和暗色版本。此外，若我们想把按钮放在一个非白色的背景之上呢?显然使用灰色( gray)作投影只适用于纯白背景的情况。其实只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了：

    .basisButton {
      padding: .3em .8em;
      border: 1px solid rgba(0, 0, 0, .1);
      background: #58a linear-gradient(hsla(0, 0%, 100%, .2),
          transparent);
      border-radius: .2em;
      box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
      color: white;
      text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
      font-size: 125%;
      line-height: 1.5;
    }

　　

如果想要覆盖掉background-color属性，就可以得到不同眼的版本按钮。

  <span class='basisButton  red'>
    Yes!
  </span>

　　

   .red{
      background-color:#c00;

    }