Html ：使用“变换：缩放”时悬停时，after是重叠的主div

我有一个按钮，它有一个阴影效果，通过使用：after伪元素应用，因为我希望阴影比主元素小。 问题是，当我应用transform:scale属性时：after会出现并与主属性重叠。代码如下：

按钮{
字号：18px；
字体大小：300；
背景：继承；
最小宽度：180px；
最大高度：60px；
边界半径：30px；
填充顶部：20px；
}
.btn主站{
颜色：黑色！重要；
背景：白色；
}
.btn主：悬停{
变换：比例（1.1）
}
.btn main：之后{
内容：''；
不透明度：.6；
位置：相对位置；
顶部：-5px；
背景：黑色；
宽度：60%；
边界半径：20px；
保证金：0自动；
显示：块；
z指数：-1；
盒影：0px 0px 15px 4px rgba（144164174,1），0px 0px 4px rgba（144164174,1），0px 0px 50px 30px rgba（144164174,3）；
}

---

我是一个按钮

已经尝试了一段时间了，我能想到的最好办法是包装元素，并使用它的伪阴影

.btn包装器{
位置：相对位置；
显示：内联块；
边界半径：30px；
}
.btn包装器按钮{
位置：相对位置；
字号：18px；
字体大小：300；
背景：白色；
最小宽度：180px；
最大高度：60px；
边界半径：30px；
填充顶部：20px；
}
.btn包装器：：之前{
内容：''；
位置：绝对位置；
最高：80%；
宽度：40%；
左：30%；
身高：0；
盒影：0px 0px 12px 4px rgba（1441641741），0px 0px 4px rgba（1441641741），0px 0px 35px 22px rgba（144164174,3）；
}
.btn包装器：hover.btn main{
变换：比例（1.1）
}
.btn包装器：悬停：：之前{
盒影：0px 0px 12px 4px rgba（255,0,0,1），0px 0px 4px rgba（255,0,0,1），0px 0px 35px 22px rgba（255,0,0,3）；
}

我是一颗纽扣

很好的解决方案，但是当我将鼠标悬停在阴影上时，我也不知道如何更改阴影的属性button@HugoMoutinho更新了我的答案以显示操作（在CSS末尾添加了新的更新的hover类）真棒，伙计。谢谢