CSS相对颜色鼠标悬停或点击交互变色实例页面

CSS代码：

:root {
    --color: #2a80eb;
}
.link {
    font-size: 150%;
    color: var(--color);
    transition: .2s;
}
.link:hover {
    color: hsl(from var(--color) h s calc(l + 10));
}

.btn {
    font-size: 150%;
    padding: .5em 2em;
    background-color: var(--color);
    color: #fff;
    transition: .2s;
    border: 0;
}
.btn:active {
    background-color:hsl(from var(--color) h s calc(l - 10));
}

HTML代码：

<h4 class="fill">链接hover高亮</h4>
<a href class="link">我是链接</a>

<h4 class="fill">按钮按下背景色加深</h4>
<button class="btn">我是按钮</button>