JSFiddle - React, Tailwind, and code Playground

by vovkasolovev

HTML

<div class="container">

<h1>Hover / Active с OKLCH</h1>

<div class="description">
Hover — светлее и чуть насыщеннее<br>
Active — темнее и чуть насыщеннее
</div>

<div class="section">
  <h3>Основные кнопки</h3>
  <div class="grid">
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-accent">Accent</button>
    <button class="btn btn-green">Green</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-muted">Muted</button>
  </div>
</div>

<div class="section">
  <h3>Outline</h3>
  <div class="grid">
    <button class="btn-outline">Primary</button>
    <button class="btn-outline" style="--l:0.5;--c:0.25;--h:30">Accent</button>
    <button class="btn-outline" style="--l:0.45;--c:0.35;--h:100">Green</button>
    <button class="btn-outline" style="--l:0.5;--c:0.05;--h:210">Muted</button>
  </div>
</div>

<div class="section">
  <h3>Ссылки</h3>
  <div class="links-demo">
    <a href="#" class="link">Primary link</a>
    <a href="#" class="link" style="--l:0.5;--c:0.25;--h:30">Accent link</a>
    <a href="#" class="link" style="--l:0.45;--c:0.35;--h:100">Green link</a>
    <a href="#" class="link" style="--l:0.5;--c:0.05;--h:210">Muted link</a>
  </div>
</div>

</div>

CSS

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:#F8F9FA;
  color:#212529;
  padding:3rem;
}
.container{max-width:900px;margin:0 auto}
h1{font-size:2rem;margin-bottom:1rem}
h3{margin-bottom:1rem}
.description{background:#E1EBFF;padding:1.5rem;border-radius:12px;margin-bottom:3rem;line-height:1.6}
.section{margin-bottom:3rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}

/* Базовая кнопка */
.btn{
  --base:#3631D8;
  --text:#fff;
  background:color(var(--base) oklch);
  color:var(--text);
  border:none;
  padding:1rem 2rem;
  border-radius:8px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}

.btn:hover{
  background:color(var(--base) oklch l(+0.08) c(+0.05));
}

.btn:active{
  background:color(var(--base) oklch l(-0.05) c(+0.03));
}

/* Цвета кнопок */
.btn-primary{--base:#3631D8}
.btn-accent{--base:#EA6F00}
.btn-green{--base:#62A212}
.btn-light{--base:#E1EBFF;--text:#212529}
.btn-muted{--base:#6C757D}

/* Outline */
.btn-outline{
  --base:#3631D8;
  --text:#3631D8;
  background:transparent;
  color:var(--text);
  border:2px solid var(--text);
  padding:1rem 2rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}

.btn-outline:hover{
  color:color(var(--base) oklch l(+0.08) c(+0.05));
  border-color:color(var(--base) oklch l(+0.08) c(+0.05));
}

.btn-outline:active{
  color:color(var(--base) oklch l(-0.05) c(+0.03));
  border-color:color(var(--base) oklch l(-0.05) c(+0.03));
}

/* Ссылки */
.link{
  --base:#3631D8;
  color:color(var(--base) oklch);
  text-decoration:none;
  font-weight:500;
  border-bottom:2px solid transparent;
  transition:all .15s ease;
}
.link:hover{
  color:color(var(--base) oklch l(+0.08) c(+0.05));
  border-bottom-color:currentColor;
}
.link:active{
 ...