关于html按钮颜色的问题

一个可点击的按钮，点击之后回不到最初设置的颜色，而是点击那一瞬间的那个颜色，只有点击其他地方，按钮颜色才会恢复正常。这是什么原因？

因为添加了focus，让他获取了焦点却没还原

按钮常用的三种状态：

普通状态
hover 鼠标悬停状态
active 点击状态

不会回到初始状态可能是因为设置默认状态和激活状态的颜色是一样的。
举例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button class="btn" type="button">按键</button>
    </body>
    <style>
        /* 默认色 */
        .btn {
            background-color: #007FAA;
            color: #00FFFF;
        }

        /* 鼠标悬浮色 */
        .btn:hover {
            background-color: #0000EE;
            color: #FFF;
        }

        /* 鼠标点击色 */
        .btn:active {
            background-color: #FFF;
            color: #000;
        }
    </style>
</html>

1、看下点击的时候是不是给这个按钮加了class(填充颜色)
2、看下有没有加什么:active.:hover这些的

按钮四态：
1，访问前：link
2，鼠标悬停：hover
3，点击中：active
4，点击后：visited