學習、收集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：不定時更新。。。