css按钮点击下去时颜色变深,松开按钮时未点击前的状态

实现按钮点击效果，可以通过CSS的伪类来实现。具体做法是，在按钮样式中设置一个鼠标按下的伪类选择器:focus，在该选择器中修改按钮的颜色或者背景颜色，使其变深。

示例代码如下：

<style>
    /* 按钮样式 */
    .btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #f0f0f0;
        border: none;
        color: #333;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
    }
    
    /* 鼠标按下时的效果 */
    .btn:focus {
        background-color: #ccc;
    }
</style>

<button class="btn">点击按钮</button>

在这个例子中，按钮的样式类为.btn，当按钮被点击时，会给按钮添加一个:focus的伪类选择器，通过设置其背景颜色为#ccc，使按钮的颜色变深。

当按钮被松开时，按钮恢复到未点击前的状态，即背景颜色为#f0f0f0。

通过这种方式，可以实现按钮点击下去时颜色变深，松开按钮时恢复到未点击前的状态。