内容：``在两个地方防止动画

Question

我有一个在CSS中使用“内容”的按钮。它有一点动画。 我添加了一个模糊效果，该效果也包含在CSS中。 现在可以模糊了，但是按钮动画不起作用。

我尝试省略两个内容：

body .BlurBox:before {
   position: absolute;
   top: -20px;
   left: -20px;
   right: -20px;
   bottom: -20px;
   background: url(/css/473503-Joker-Batman-748x421.jpg);
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   filter: blur(8px);
   margin-bottom: 1%;
   content: "";
}

还有

.btn::before {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 0%;
   background: orange;
   z-index: -1;
   transition: 0.8s;
   color: orange;
}

预期结果：带有圆形动画的按钮

结果：仅带有简单动画的按钮