变换：翻译不起作用

Question

我正在尝试制作按钮动画，但transform:translateY似乎不适合我。

ul {
	list-style-type: none;
	padding:0;
	
}
.btn {
	height: 42px;
	width: 20px;
	display: inline-block;
	border: none;
	background-color: #E6E6FF;
	box-shadow: 0 8px #ccccff;
}
.btn:focus {
	outline:0;
	
}
.btn:hover {
	box-shadow: 0 4px #ccccff;
	transform: translateY(4px);
}
.btn:active {
	box-shadow:none;
	transform: translateY(4px);
}

<ul>
	<li>
		<button class="btn"></button>
	</li>
</ul>

按下后，我试图让按钮与另一个按钮齐平。盒子阴影消失了，但按钮没有移动另外4个像素transform: translateY(4px);不确定为什么会发生这种情况，你的想法会很棒。

Answer 1

.btn:active {
box-shadow:none;
transform: translateY(8px);

}