：当我使用transform：scale时，在悬停时重叠主div

Question

我有这个按钮，通过使用：after伪元素应用阴影效果，因为我希望阴影小于主元素。 问题是当我应用transform：scale属性时：在前进并重叠主要属性之后。下面是代码：

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

现在尝试了一段时间，我能想出的最好的事情是包装元素并使用伪作为阴影

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;