使用CSS相对颜色实现按钮文字和背景色自动适配实例页面

回到相关文章 »

效果：

请选择颜色：

代码：

CSS代码：

.btn {
    font-size: 150%;
    padding: .5em 2em;
    --bgcolor: var(--color, #2c87ff);
    background-color: var(--bgcolor);
    color: hsl(from var(--bgcolor) h s calc((l - 60) * -999999));
    --border-alpha: calc((var(--lightness) - var(--border-threshold))* 100);
    border: .2em solid;
    border-color: hsl(from var(--bgcolor) h s calc(l - 20 * clamp(-1, calc(l - 50), 1)));
}

HTML代码：

<button id="btn" class="btn">我是按钮</button>

<p>请选择颜色：<input 
  type="color" 
  value="#2c87ff" 
  onInput="btn.style.setProperty('--color', this.value);"
></p>