Html 简单的按钮效果不起作用

我试图做一个简单的按钮动画，但它不会工作，因为某些原因。我从括号编辑器中获取了代码，并将其放在代码笔中，它工作正常，但在括号编辑器中无法工作。新按钮工作正常，但其他两个按钮无法工作。有什么想法吗

.btn风格{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：300；
颜色：#5c；
背景：无；
大纲：无；
边界：无；
}
.btn新{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：30px；
字体大小：25px；
}
.btn卷{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：370px；
字体大小：25px；
}
.btn保持{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：415px；
字体大小：25px；
}
按钮：悬停{
颜色：黑色；
}
.btn新：活动{
顶部：32px；
}
.btn滚动：激活{
顶部：372px；
}
.btn保持：活动{
顶部：417px；
}

新游戏
掷骰子
按住

我不知道动画出了什么问题，因为您的代码是正确的。是否有任何其他样式表或脚本会干扰动画

然而，这里有一些可能解决问题的建议：尽可能不要使用绝对定位

在这里，您可以更改

边距

以将按钮向下移动2个像素，而不是更改

top

属性：

.btn-new:active, .btn-roll:active, .btn-hold:active {
    margin: 2px 0 -2px 0;
}

下面是完整的示例：

.btn风格{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：300；
颜色：#5c；
背景：无；
大纲：无；
边界：无；
保证金：0；
}
.btn新{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：30px；
字体大小：25px；
}
.btn卷{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：370px；
字体大小：25px；
}
.btn保持{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
顶部：415px；
字体大小：25px；
}
按钮：悬停{
颜色：黑色；
}
.btn新：激活，.btn滚动：激活，.btn保持：激活{
保证金：2px0-2px0；
}

新游戏
掷骰子
稍等

您能否更具体地说明您面临的问题？