Цвета ссылок 24

by vovkasolovev

HTML

<div class="container">

<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="--base:#EA6F00">Accent</button>
    <button class="btn-outline" style="--base:#62A212">Green</button>
    <button class="btn-outline" style="--base:#6C757D">Muted</button>
  </div>
</div>

<div class="section">
  <h3>Ссылки</h3>
  <div class="links-demo">
    <a href="#" class="link">Regular link</a>
    <a href="#" class="link link-primary">Primary link</a>
    <a href="#" class="link link-accent">Accent link</a>
    <a href="#" class="link link-green">Green link</a>
    <a href="#" class="link link-light">Light link</a>
    <a href="#" class="link link-muted">Muted link</a>
  </div>
</div>

</div>

CSS

*{margin:0;padding:0;box-sizing:border-box}

body{

--hover-amount: 90%;
--hover-color: #7777ff;
--active-color:#331010;
--active-amount:95%;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:#F8F9FA;
  color:#212529;
  padding:3rem;
}

.container{max-width:900px;margin:0 auto}

h3{margin-bottom:1rem}


.section{margin-bottom:3rem}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
}

/* БАЗОВАЯ СИСТЕМА */
.btn{
  --base:#3631D8;
  --hover:color-mix(in srgb,var(--base) var(--hover-amount), var(--hover-color));
  --active:color-mix(in srgb,var(--base) var(--active-amount), var(--active-color));
  background:var(--base);
  color:#fff;
  border:none;
  padding:1rem 2rem;
  border-radius:8px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
}

.btn:hover{background:var(--hover);}
.btn:active{background:var(--active);}

/* ЦВЕТА КНОПОК */
.btn-primary{--base:#3631D8}
.btn-accent{--base:#EA6F00}
.btn-green{--base:#62A212}
.btn-light{--base:#E1EBFF;color:#212529}
.btn-muted{--base:#6C757D}

/* OUTLINE */
.btn-outline{
  --base:#3631D8;
  --hover:color-mix(in srgb,var(--base) var(--hover-amount), var(--hover-color));
  --active:color-mix(in srgb,var(--base) var(--active-amount), var(--active-color));
  background:transparent;
  color:var(--base);
  border:2px solid var(--base);
  padding:1rem 2rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}

.btn-outline:hover{
  color:var(--hover);
  border-color:var(--hover);
  background:color-mix(in srgb,var(--base) 10%,transparent);
}

.btn-outline:active{
  color:var(--active);
  border-color:var(--active);
  background:color-mix(in srgb,var(--base) 15%,transparent);
}

/* ССЫЛКИ */
.link {
  --base:#212529; 
  --hover:#3631D8; 
  --active:#3631D8;
  color:var(--base);
  text-decoration:none;
  font-weight:500;
 ...