Reset

Resets values.

html

<form class="reset-demo">
  <button type="reset" class="btn-reset btn-reset--bordered" style="--bg:#241430;border-radius:10px">Reset</button>
</form>
<style>
.reset-demo { display: inline-block; }
.btn-reset {
  font: 600 15px/1 system-ui, sans-serif;
  padding: 11px 20px;
  border: 2px solid var(--bg);
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn-reset--ghost { border-color: transparent; }
.btn-reset:hover:not(:disabled) { background: rgba(36,20,48,.08); }
.btn-reset:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-reset:disabled { opacity: .45; cursor: not-allowed; }
</style>

tailwind

<form class="inline-block">
  <button type="reset" class="px-5 py-2.75 text-sm font-semibold bg-transparent cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed hover:bg-black/5 btn-reset-tw btn-reset-tw--bordered" style="border:2px solid #241430;color:#241430;border-radius:10px">Reset</button>
</form>
<style>
.btn-reset-tw--ghost { border-color: transparent !important; }
.btn-reset-tw--bordered:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function ResetButton({
  label = "Reset",
  variant = "bordered",
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  const ghost = variant === "ghost";
  return (
    <form style={{ display: "inline-block" }}>
      <button
        type="reset"
        disabled={disabled}
        style={{
          padding: "11px 20px",
          borderRadius: radius,
          border: `2px solid ${ghost ? "transparent" : bg}`,
          background: "transparent",
          color: bg,
          font: "600 15px/1 system-ui, sans-serif",
          cursor: disabled ? "not-allowed" : "pointer",
          opacity: disabled ? 0.45 : 1,
        }}
      >
        {label}
      </button>
    </form>
  );
}