自己动手构建 button 轮子_zyy2404的专栏文章_微信文章

构建一个轮子首先要保证的就是复用性，对一些 CSS 样式表的属性操作，我们应该避免使用绝对长度值，这种做法会添加后期维护，并且不容易扩展，下面通过一个反例来说明将绝对长度值赋值给 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库的调色板

自己动手构建 button 轮子

文章预览

自己动手构建 button 轮子