html - 变换 :Translate Not Working

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>

我正在尝试使按钮在按下后与另一个按钮齐平。框阴影消失了，但是按钮没有通过 transform: translateY(4px); 向下移动另外 4 个像素 不知道为什么会这样，如果你的想法很好。

Answer 1

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