如何为按钮按下激活、松开释放状态设置不同CSS过渡效果

当前写法不符合预期的核心原因是CSS过渡的生效规则：过渡时长取状态切换起始时刻元素匹配的transition值。
你把1s过渡写在按钮基础样式中，仅在:active状态下设置transition: 0s，只会让按下（进入:active）的瞬间瞬时变色；松开按钮（离开:active）时，元素回到基础样式，1s过渡规则生效，自然会出现颜色慢过渡的效果。
原代码还有两个小疏漏：

• 基础样式的过渡属性没包含border-color，边框变化一直是瞬时的，和其他属性过渡节奏不一致
• :active状态下未设置background-color，按下时背景色会停留在hover态的颜色值，样式不统一

把1s过渡规则绑定到「按钮未被按下」的状态上，让所有和:active相关的状态切换都走0s瞬时变化，同时补全遗漏的属性：

.submitBtn {
    position: absolute;
    display: block;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 225px;
    height: 40px;
    border: 3px solid #1c215e;
    border-radius: 5px;
    color: #9fa6fc;
    background-color: #1c215e;
    font-size: 16px;
    margin-top: 150px;
}

/* 仅在按钮未按下时启用1s过渡，覆盖鼠标移入移出场景 */
.submitBtn:not(:active) {
    transition: color 1s, background-color 1s, border-color 1s;
}

.submitBtn:hover {
    color: black;
    background-color: #4a53c2;
}

.submitBtn:active {
    color: #3e46a8;
    border-color: #3e46a8;
    background-color: #3e46a8;
    transition: 0s;
}

HTML部分不需要修改：

<button class="submitBtn" type="submit">Login</button>

修改后交互完全符合预期：

• 鼠标移入/移出按钮：颜色走1s平滑过渡
• 按下按钮瞬间：所有颜色瞬时切换为按下态色值
• 松开按钮瞬间：所有颜色瞬时切回对应状态（默认/hover）的色值，不会出现慢过渡

内容的提问来源于stack exchange，提问作者goeadli