每天一个CSS小技巧，第一期，新拟态效果按钮

先来看一下效果图：

抄作业

需要效果的可以直接复制下边的代码抄作业，往后看讲解属性和实现；

<div class="btn">
    悬浮按钮
</div>

 <style>
    body {
        background-color: #eee;
    }
    .btn {
        width: 140px;
        height: 60px;
        background: #e9ecef;
        color: #333;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        transition: .2s all;
        margin: 100px;

        box-shadow:
            7px 7px 12px rgba(0, 0, 0, .4),
            -7px -7px 12px rgba(255, 255, 255, .9),
            inset 0 0 0 rgba(255, 255, 255, .9),
            inset 0 0 0 rgba(0, 0, 0, .4);

        &:active {
            box-shadow:
                0 0 0 rgba(0, 0, 0, .4),
                0 0 0 rgba(255, 255, 255, .9),
                inset -7px -7px 12px rgba(255, 255, 255, .9),
                inset 7px 7px 12px rgba(0, 0, 0, .4);
            font-size: 14px;
        }
    }
</style>

box-shadow 的基本属性

box-shadow: x偏移量 y偏移量 模糊半径 扩散半径 颜色；

box-shadow 的内外阴影

添加关键字 inset 后是内阴影效果

给 div 添加两个阴影，方向和颜色相反，来实现类似凹凸的效果；

 box-shadow:
    7px 7px 12px rgba(0, 0, 0, .4),
    -7px -7px 12px rgba(255, 255, 255, .9),
    inset 0 0 0 rgba(255, 255, 255, .9),
    inset 0 0 0 rgba(0, 0, 0, .4);

因为要做动画效果，所以 这几个属性要都写上；

:active的时候把 字体 缩小了一点，看上去会真实一点；