css之利用偽類實現按鈕點擊狀態的明暗變換

<div class="rel">
    <div class="clickbtn">
        Button
    </div>
</div>

css部分

.clickbtn{
    position: absolute;
    width: 120px;
    height: 50px;
    top: 50%;
    left: 50%;
    background: #43b049;
    border-radius: 20px;
    transform: translate(-50%,-50%);
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.clickbtn:before{
    position: absolute;
    left: 0;
    top: 0;
    right:0;
    bottom: 0;
    background: rgba(0,0,0,.1);
    border-radius: 20px;    
}
.clickbtn:hover:before{
    content: '';
}
.clickbtn:active:before{
    background: transparent;    
    content: '';
}