css 移动端按压波纹 |css label 字体居中显示

.btn:focus{
transition: all 0.3s ease-out;
transform: scale(1.05);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
outline: none;
}
.btn:active{
transition: all 0.3s ease-out;
transform: scale(0.95);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.2);
}

通过:focus和:active伪类选择器来实现按压效果。其中:focus表示按钮获取焦点时，:active表示按钮被激活（被按下）时。通过transition属性来实现平滑过渡效果，transform属性控制按钮缩放，box-shadow属性实现按钮阴影效果，background-color属性确定背景色。

需要注意的是，该效果在Android平台下可能会出现卡顿，需要针对不同的平台做适配。同时，在考虑交互效果时也需兼顾用户体验，不要过分追求效果而降低实用性。