自己动手构建 button 轮子

自己动手构建 button 轮子

构建一个轮子首先要保证的就是复用性，对一些 CSS 样式表的属性操作，我们应该避免使用绝对长度值，这种做法会添加后期维护，并且不容易扩展，下面通过一个反例来说明通过绝对长度值来描述的一些危害。

button的 html

   // 由于使用了 react，这里是 class 表示为 className
   <div className={'yy-button-box'}>
    <button className={'yy-button'}>Button</button>
    </div>

使用了绝对长度值作为CSS样式属性

.yy-button {
    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;
}

.yy-button-box {
   margin : 50px;
}

一股浓浓的 Facebook 风，效果如下：

目前看来似乎没有问题但是假如我们要把按钮加大，比如吧 fontSize 属性加大到 40，50？

此时的效果如下：

这很明显不是我们想要的效果，造轮子万变不离其一在于抽象，比如，我们可以进行以下改造：

• 按钮根据按钮的文本进行调整，归根结底是相对于 font-size 进行调整，这个时候也就有了解决方案，我们可以通过 em 这个单位来实现动态调整，1em 等于当前元素的 font-size
• 接着我们可以进一步将 button 的 font-size 抽象，使用百分比，根据父元素的 font-size 来调整

.yy-button {
    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 : 100%;
    line-height:1.5;
}

.yy-button-box {
   margin : 50px;
   font-size: 50px;
}

当 button 的 font-size 为 50px，此时的效果：

在尺寸上面，已经实现了轮子复用的目的，但是在一些阴影的处理上面，可能稍有欠缺，比如，此时的阴影处理都是黑色偏暗的色调，如果背景色也是偏暗的时候，此时的阴影处理就会变得很糟糕。

通过将半透明的黑色和白色叠加在主色调上面可以实现主色调的亮色和暗色的变体，rgba 和 hsla 的第四个参数就是透明度，通过传入 0.5 来实现半透明颜色

.yy-button {
    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;
}

效果如下：

接着是实现和大部分 UI组件库 一样，根据不同状态显示不同颜色的效果

    <div className={'yy-button-box'}>
    <button className={'yy-button default'}>Default</button>
    <button className={'yy-button success'}>Success</button>
    <button className={'yy-button warning'}>Warning</button>
    <button className={'yy-button danger'}>Danger</button>
    </div>

添加对应的 CSS，参考 evergreen UI库

.yy-button.default {
    backgroud-image: linear-gradient(to bottom, #0788DE, #116AB8);
}

.yy-button.success {
    background-image: linear-gradient(to bottom, #23C277, #399D6C);
}

.yy-button.warning {
    background-image: linear-gradient(to bottom, #EE9913, #D9822B);
}

.yy-button.danger {
    background-image: linear-gradient(to bottom, #EC4C47, #D64540);
}

效果如下，成功造成一个 button 轮子

---

站在巨人肩膀：

• 参考 《CSS揭秘》一书
• 参考 evergreen UI库的调色板