CSS按钮-悬停并单击时文本模糊

Question

我已经做了一个非常简单的按钮，带有标准的translate属性，使人感觉它被“单击”。

Codepen-https://codepen.io/sammunro100/pen/aKKoRr

.btn:link,
.btn:visited{
    position:absolute;
    top:50px;
    left:500px;
    text-transform: uppercase;
    text-decoration: none;
    padding:15px 40px;
    border-radius: 100px;
    transition: all 2s;
}

.btn:hover{
    transform: translateY(-5px);

}

.btn:active{
    transform: translateY(-1px);

}   

.btn-white{
    background: black;
    color: white;
}

但是，每当单击并悬停按钮时，在处理动画时，其内部文本就会模糊。