pico/scss/content/_button-styles.scss

@if $enable-classes {

/**
 * Button Styles
 */

  // Button .secondary
  button.secondary,
  input[type="submit"].secondary,
  input[type="reset"],
  a[role="button"].secondary {
    background-color: var(--secondary);
    color: var(--secondary-inverse);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--secondary-hover);
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
    }
  }


  // Button .contrast
  button.contrast,
  input[type="submit"].contrast,
  input[type="reset"].contrast,
  a[role="button"].contrast {
    background-color: var(--contrast);
    color: var(--contrast-inverse);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--contrast-hover);
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem var(--contrast-focus);
    }
  }


  // Button .outline
  button.outline,
  input[type="submit"].outline,
  a.outline[role="button"] {
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--primary-hover);
      color: var(--primary-hover);
    }
  }


  // Button .outline.secondary
  button.outline.secondary,
  input[type="submit"].outline.secondary,
  input[type="reset"].outline,
  a[role="button"].outline.secondary {
    border: 1px solid var(--secondary);
    background-color: transparent;
    color: var(--secondary);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--secondary-hover);
      color: var(--secondary-hover);
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
    }
  }


  // Button .outline.contrast
  button.outline.contrast,
  input[type="submit"].outline.contrast,
  input[type="reset"].outline.contrast,
  a[role="button"].outline.contrast {
    border: 1px solid var(--contrast);
    background-color: transparent;
    color: var(--contrast);

    &:hover,
    &:active,
    &:focus {
      border: 1px solid var(--contrast-hover);
      color: var(--contrast-hover);
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem var(--contrast-focus);
    }
  }
}