Outline button color style for use with the .btn base style.

Link Button
<div class="mb1">
  <button class="btn btn-outline">Button</button>
  <a href="#!" class="btn btn-outline">Link Button</a>
  <input type="button" class="btn btn-outline" value="Input Button">
</div>

By default, .btn-outline inherits color from its parent. Use color utilities to adjust the color per button.

<div class="p1">
  <button class="btn btn-outline mb1 blue">Button</button>
  <button class="btn btn-outline mb1 black">Button</button>
  <button class="btn btn-outline mb1 navy">Button</button>
  <button class="btn btn-outline mb1 olive">Button</button>
  <button class="btn btn-outline mb1 red">Button</button>
  <button class="btn btn-outline mb1 fuchsia">Button</button>
  <button class="btn btn-outline mb1 purple">Button</button>
  <button class="btn btn-outline mb1 maroon">Button</button>
</div>

<div class="p1 bg-black">
  <button class="btn btn-outline mb1 aqua">Button</button>
  <button class="btn btn-outline mb1 teal">Button</button>
  <button class="btn btn-outline mb1 lime">Button</button>
  <button class="btn btn-outline mb1 green">Button</button>
  <button class="btn btn-outline mb1 yellow">Button</button>
  <button class="btn btn-outline mb1 orange">Button</button>
  <button class="btn btn-outline mb1 gray">Button</button>
  <button class="btn btn-outline mb1 silver">Button</button>
</div>

CSS Source

.btn-outline,
.btn-outline:hover {
  border-color: currentcolor;
}

.btn-outline {
  border-radius: var(--border-radius);
}

.btn-outline:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.btn-outline:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.btn-outline:disabled,
.btn-outline.is-disabled {
  opacity: .5;
}

7 Rules
9 Selectors
60 Declarations
57 Properties