学习、收集button各种[过渡/动画]效果

1.利用活动状态 .active 实现点击效果
:active 活动时向右下移动，使用transform属性，顺便添加transition 属性，优化一下过渡效果。(可以使用控制台，通过调试获得合适的贝塞尔曲线)
https://codepen.io/nidusp/pen/yLYNara

<label class="button"><button></button>按钮</label>

// 使用label，帮助区分hover、active、focus三种状态的区别
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
button {
    margin: 0 .2em;
    width: 5em;
    height: 2em;
    border-radius: 1em;
    background-color: darkorange;
    box-shadow: 0 0 1em 0 darkorange, inset 0 0 .5em 0 rgba(0, 0, 0, 0.5);
    transition: transform .25s cubic-bezier(0, 0.88, 0.24, 0.47);
    cursor: pointer;
}
button:hover {
    background-color: aqua;
}
button:active {
    transform: translate3d(.5em, .5em, 0);
}
button:focus {
    box-shadow: 0 0 1em 0 aqua, inset 0 0 .5em 0 rgba(0, 0, 0, 0.5);
}

ps：不定时更新。。。