<aside class="sliders">
  <input type="range" id="hue" min="0" max="360" value="220" step="1"> 
  <input type="range" id="saturation" min="0" max="100" value="100" step="1"> 
  <input type="range" id="lightness" min="0" max="100" value="50" step="1">
</aside>
<main>
<button class="btn">我是一个button元素</button> 
<a href="javascript: void(0);" class="btn">我是一个a元素</a>
<div class="btn">我是一个div元素</div>
</main>

:root {
    --hue: 220;
    --saturation: 90;
    --light: 36;
    --threshold: 60;
    --border-threshold: 80;
}


body {
  width: 100vw;
  height: 100vh;
  padding: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sliders{
  width: 60vw;
  display:flex;
  margin-bottom: 10px;
}

.sliders input{
  flex:1;
}

.buttons{
  display:flex;
}


input[type=range]{
  display:flex;
  flex-direction:column;
  color: black;
  text-align:center;
  margin: 10px;
}

input::before{
  content: attr(id);
  text-transform: capitalize;
}

input[id=hue]::after{
  counter-reset: hue var(--hue);
  content: counter(hue);
}

input[id=saturation]::after{
  counter-reset: sat var(--sat);
  content: counter(sat);
}

input[id=lightness]::after{
  counter-reset: light var(--light);
  content: counter(light);
}


    button {
        padding: 0;
        border: none 0;
        font: inherit;
        color: inherit;
        background-color: transparent;
        cursor: pointer;
    }

.btn {
    --switch: calc( (var(--light) - var(--threshold)) * -100% );
  --border-light: calc(var(--light) * 0.7%);
    --border-alpha: calc((var(--light) - var(--border-threshold)) * 10);
    
    display: inline-flex;
    justify-content: center;
    align-items: center;

    text-decoration: none; /*for <a> link*/

    padding: 1em; 
    margin: 0.5em;
    font-size: 1.5rem; 
    border-radius: 0.2em;

    border: 1px solid transparent;

    color: hsl(0, 0%, var(--switch));
    
    background-color: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--light) * 1%));
    border-color: hsla(var(--hue), calc(var(--saturation) * 1%), var(--border-light), var(--border-alpha));

}

const root = document.documentElement;
const inputs = [].slice.call(document.querySelectorAll('input'));

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
   if (this.id === 'hue') root.style.setProperty('--hue', this.value);
   if (this.id === 'saturation') root.style.setProperty('--sat', this.value);
  if (this.id === 'lightness') root.style.setProperty('--light', this.value);
}