button.ghost

[odama626]

a ghost style button that is like outline -- just without the outline

messing around with chatgpt...

/* Base ghost button style */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-color: var(--pico-primary);
}

/* Hover, focus, active, and aria-current states */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary-hover);
  --pico-border-color: transparent;
}

/* Secondary ghost button */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost.secondary {
  --pico-color: var(--pico-secondary);
}

:is(button, [type="button"], [type="submit"], [role="button"]).ghost.secondary:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-color: var(--pico-secondary-hover);
}

/* Contrast ghost button */
:is(button, [type="button"], [type="submit"], [role="button"]).ghost.contrast {
  --pico-color: var(--pico-contrast);
}

:is(button, [type="button"], [type="submit"], [role="button"]).ghost.contrast:is(
    :hover,
    :focus,
    :active,
    [aria-current]:not([aria-current="false"])
  ) {
  --pico-color: var(--pico-contrast-hover);
}

[nicholas-johnson]

Approving of this. It's useful for things like icon buttons, and cases where a button has to look like a link for any reason.

[Yohn]

Ghost buttons have been added as of version 2.2.4