css3阴影效果按钮 |css中鼠标划过touch

.btn {
border: none;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #00bcd4;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.btn:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}

使用CSS3的box-shadow属性可以实现阴影效果。这个属性有四个参数：水平方向的偏移量、垂直方向的偏移量、模糊半径和阴影颜色。

在以上代码中，大家设置了一个按钮样式，并在:hover状态下增加了阴影和上移的3D效果。因为大家使用了transition属性，使得增加按钮样式的变化更加平滑。

总之，CSS3阴影效果按钮不仅可以增加网页的美观度，还可以提升用户体验感。如果您正在设计网站或应用程序，不妨加入这种按钮效果。