Secondary Button

Supporting action.

html

<button type="button" class="btn-secondary btn-secondary--md" style="--bg:#241430;border-radius:10px">Learn more</button>
<style>
.btn-secondary {
  font: 600 15px/1 system-ui, sans-serif;
  padding: 11px 20px;
  border: 2px solid var(--bg);
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn-secondary--lg { padding: 14px 26px; font-size: 16px; }
.btn-secondary:hover:not(:disabled) { background: rgba(36,20,48,.08); }
.btn-secondary:active:not(:disabled) { background: rgba(36,20,48,.14); }
.btn-secondary:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="bg-transparent cursor-pointer font-semibold disabled:opacity-45 disabled:cursor-not-allowed hover:bg-black/5 active:bg-black/10 btn-secondary-tw btn-secondary-tw--md" style="border:2px solid #241430;color:#241430;border-radius:10px">Learn more</button>
<style>
.btn-secondary-tw--md { padding: 11px 20px; font-size: 15px; }
.btn-secondary-tw--lg { padding: 14px 26px; font-size: 16px; }
.btn-secondary-tw--md:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function SecondaryButton({
  label = "Learn more",
  size = "md",
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  const lg = size === "lg";
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        padding: lg ? "14px 26px" : "11px 20px",
        fontSize: lg ? 16 : 15,
        borderRadius: radius,
        border: `2px solid ${bg}`,
        background: "transparent",
        color: bg,
        fontWeight: 600,
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.45 : 1,
      }}
    >
      {label}
    </button>
  );
}