body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #fff;

}

​

​

div {

    position: relative;

    margin: auto;

    width: 200px;

    height: 64px;

    line-height: 64px;

    font-size: 32px;

    border: 1px solid #000;

    text-align: center;

    background: var(--bg);

    cursor: pointer;

    transition: .3s all;

}

​

div:hover {

    background: hsl(from var(--bg) h s calc(l * 1.2));

}

div:active {

    background: hsl(from var(--bg) h s calc(l * 0.8));

}

​

div:nth-child(1) {

    --bg: #fc0;

}

​

div:nth-child(2) {

    --bg: #CDDC39;

}

​

div:nth-child(3) {

    --bg: #82d8ff;

}

​