[分享]css3手机点击效果代码

CSS3手机点击效果是为了提升用户体验而设计的，通过改变按钮的样式，让用户更容易感受到交互的反馈。以下是CSS3手机点击效果的代码：button{ :relative; overflow:hidden...

CSS3手机点击效果是为了提升用户体验而设计的，通过改变按钮的样式，让用户更容易感受到交互的反馈。以下是CSS3手机点击效果的代码：

button{
    position:relative;
    overflow:hidden;
    background-color:#39c;
    border-radius:5px;
    color:#fff;
    padding:8px 16px;
    font-size:16px;
    text-align:center;
    transition:all 0.3s ease;
}

button:hover{
    background-color:#fff;
    color:#39c;
    cursor:pointer;
}

button:active{
    transform:scale(0.95);
    filter:brightness(0.8);
} 

代码中，首先定义了一个button标签，并设置了其基本样式，包括背景色、圆角、颜色、字体大小等。接下来，通过:hover伪类来实现鼠标移入时的效果，使背景色变为白色，字体颜色变为蓝色，并且鼠标变为手型，提醒用户当前按钮处于可点击状态。最后，在:active伪类中实现了用户点击时的效果，通过transform来缩小按钮的大小并同时变暗，使用户可以更清楚地感受到点击的反馈。