Dönüşümü: Çalışmıyor Not

Question

Düğme animasyonu yapmaya çalışıyorum ama transform:translateY benim için çalışıyor gibi görünmüyor.

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

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

diğer düğme floş kez basıldığında yapmaya çalışıyorum. Kutu gölgeleri kaybolur, ancak düğme transform: translateY(4px); tarafından 4 piksel aşağı taşınmaz. Bunun neden olduğundan emin olamayın, düşünceleriniz harika olacaktır.

Answer 1

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

}