<div class="l-stack" style="padding: var(--s0);">
  <p>Default background color is explicitly set via custom property:</p>

  <p style="--btn-bg-color: var(--purple)">
    <a class="btn -explicit">Link 1</a>
    <a class="btn -explicit">Link 2</a>
    <a class="btn -explicit">Link 3</a>
  </p>

  <p>Default background color is set as the fallback value for the custom property:</p>

  <p style="--btn-bg-color: var(--purple)">
    <a class="btn -fallback">Link 1</a>
    <a class="btn -fallback">Link 2</a>
    <a class="btn -fallback">Link 3</a>
  </p>
</div>
p {
  display: flex;
  gap: var(--s0);
}

.btn {
  color: var(--offwhite);
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 2px;
}

.btn.-explicit {
  --btn-bg-color: var(--turquoise);
  background-color: var(--btn-bg-color);
}

.btn.-fallback {
  background-color: var(--btn-bg-color, var(--turquoise));
}
Run Pen

External CSS

  1. https://codepen.io/romerocs/pen/BawBLER.css

External JavaScript

This Pen doesn't use any external JavaScript resources.