css3模仿按钮点击样式

CSS3模仿按钮点击样式，可以为网页增加更加生动的效果，让用户的操作更加直观，让我们一起来学习实现。

    /*初始样式*/
    .button{
        background-color: #f44336;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
    }
    /*鼠标经过样式*/
    .button:hover{
        background-color: #d32f2f;
    }
    /*点击后样式*/
    .button:active{
        background-color: #b71c1c;
        transform: translateY(2px);
        Box-shadow: 0 0 4px #b71c1c,0 0 15px #b71c1c,0 0 20px #b71c1c;
    }

在上面的代码中，我们首先定义了一个按钮的初始状态，包括了背景色、文字颜色、内边距、边框、圆角等基本属性。然后定义了鼠标经过该按钮时的样式，仅仅改变了背景色。最后定义了点击该按钮时的样式。在这里，我们不仅改变了背景色，还使用了CSS3的transform属性，让按钮向下移动2px，同时使用了Box-shadow属性，制造了点击时的阴影效果。这些细节的处理，使得按钮的点击效果更加真实，让用户有一种物理上真正按下按钮的感觉。