Boutons

<style>
.bn-buttons {
  /* ------------------------------------------------------------
     COULEURS : ces 3 variables pilotent tout le composant.
     Valeurs par défaut = palette Blaig Nova (fond crème, texte
     quasi-noir, bordure gris-froid). Change-les pour recolorer
     entièrement le bouton, sans toucher au reste du CSS.
     ------------------------------------------------------------ */
  --bn-btn-bg: #E6E4DD;
  --bn-btn-text: #0B0F10;
  --bn-btn-border: #5C6160;

  display: flex;
  flex-direction: column;
  gap: 2rem;

  padding: 2.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-buttons__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #979793;
  margin-bottom: 1rem;
}

.bn-buttons__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.bn-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  cursor: pointer;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    outline-color 0.2s ease,
    box-shadow 0.3s ease;

  /* Effets optionnels (glow / ombre), combinables, "none" tant
     qu'ils ne sont pas activés via .fx-shadow / .fx-glow */
  --fx-shadow: none;
  --fx-glow: none;
  box-shadow: var(--fx-shadow), var(--fx-glow);
}

.bn-buttons.fx-shadow .bn-btn {
  --fx-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.6);
}

.bn-buttons.fx-glow .bn-btn {
  --fx-glow: 0 0 40px 4px rgba(230, 228, 221, 0.18);
}

/* --- Bouton principal --- */
.bn-btn--primary {
  background: var(--bn-btn-bg);
  color: var(--bn-btn-text);
}

.bn-btn--primary:hover {
  transform: translateY(-2px);
}

/* --- Bouton secondaire (contour) --- */
.bn-btn--secondary {
  background: transparent;
  color: #E6E4DD;
  border-color: var(--bn-btn-border);
}

.bn-btn--secondary:hover {
  border-color: #E6E4DD;
}

.bn-btn--secondary:focus-visible {
  outline: 2px solid rgba(230, 228, 221, 0.5);
  outline-offset: 3px;
}

/* --- Bouton texte (le plus discret) --- */
.bn-btn--text {
  background: none;
  color: #C7C1B7;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.bn-btn--text:hover {
  color: #E6E4DD;
}

/* --- État désactivé, commun à tous les types --- */
.bn-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
}

</style>

<div class="bn-buttons" data-fx-root>

  <div class="bn-buttons__group">
    <span class="bn-buttons__label">Boutons</span>
    <div class="bn-buttons__row">
      <button class="bn-btn bn-btn--primary" type="button">Bouton principal →</button>
      <button class="bn-btn bn-btn--secondary" type="button">Bouton secondaire →</button>
      <button class="bn-btn bn-btn--text" type="button">Bouton texte →</button>
    </div>
  </div>

  <div class="bn-buttons__group">
    <span class="bn-buttons__label">États</span>
    <div class="bn-buttons__row">
      <!-- Ces 3-là passent réellement les états au survol/focus si tu
           bouges ta souris dessus ou tabules avec le clavier -->
      <button class="bn-btn bn-btn--primary" type="button">Survolez-moi</button>
      <button class="bn-btn bn-btn--primary" type="button" disabled>Désactivé</button>
      <button class="bn-btn bn-btn--secondary" type="button">Tabulez ici (focus)</button>
    </div>
  </div>

</div>