:当我使用变换:缩放时悬停时，之后是重叠的主 div

Question

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

button {
	font-size: 18px;
	font-weight: 300;
	background: inherit;
	min-width: 180px;
	max-height: 60px;
	border-radius: 30px;
	padding-top: 20px;
}
.btn-main {
	color:black!important;
	background: white;
}
.btn-main:hover {
	transform:scale(1.1)
}
.btn-main:after {
	content: ' ';
	opacity: .6;
	position: relative;
	top:-5px;
	background: black;
	width: 60%;
	border-radius: 20px;
	margin: 0 auto;
	display: block;
	z-index: -1;
	box-shadow: 0px 0px 15px 4px rgba(144,164,174,1), 0px 0px 4px        rgba(144,164,174,1), 0px 0px 50px 30px rgba(144,164,174,.3);
}

<button class="btn-main">I'm a button</button>

Answer 1

已经尝试了一段时间了，我能想到的最好的办法就是包装元素并将其伪函数用于阴影

.btn-wrapper {
position: relative;
display: inline-block;
border-radius: 30px;
}
.btn-wrapper button {
position: relative;
font-size: 18px;
font-weight: 300;
background: white;
min-width: 180px;
max-height: 60px;
border-radius: 30px;
padding-top: 20px;
}
.btn-wrapper::before {
content: '';
position: absolute;
top: 80%;
width: 40%;
left: 30%;
height: 0;
box-shadow: 0px 0px 12px 4px rgba(144, 164, 174, 1), 0px 0px 4px rgba(144, 164, 174, 1), 0px 0px 35px 22px rgba(144, 164, 174, .3);
}
.btn-wrapper:hover .btn-main {
transform: scale(1.1)
}
.btn-wrapper:hover::before {
box-shadow: 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);
}

<div class="btn-wrapper">
<button class="btn-main">I'm a button</button>
</div>