Primary action button

A strong link-style action with clear hover and keyboard-focus states.

Open in Agate IDE Read the source

Live example

See the pattern in isolation

The preview uses the same locked-down composition policy as the Agate IDE.

PreviewSandboxed

Canonical source

Copy it, change it, keep it plain

These exact files power the preview and the IDE handoff.

Source

HTML

<div class="button-demo" id="next-step">
  <p>Ready to turn the sketch into a page?</p>
  <a class="primary-action" href="#next-step">Continue to the next step</a>
</div>

Source

CSS

* {
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  place-items: center;
  background: #f2e3de;
  color: #2b151d;
  font-family: system-ui, sans-serif;
}

.button-demo {
  max-width: 26rem;
  padding: 2rem;
  border: 4px solid #2b151d;
  background: #f7efe6;
}

.button-demo p {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  line-height: 1.5;
}

.primary-action {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border: 2px solid #2b151d;
  background: #b0436a;
  color: #f7efe6;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.primary-action:hover {
  background: #8e2f50;
}

.primary-action:focus-visible {
  outline: 4px solid #2b151d;
  outline-offset: 4px;
}

How it works

A small pattern with visible decisions

Use a link when the action moves to another place. The border, background, and underline-free label make the destination visually prominent without changing its meaning.

The focus rule uses both a thick outline and spacing around it, so keyboard users can see exactly where they are.

Make it yours

Open both files in the workspace.

Agate will protect different saved work before loading this example.

Open in Agate IDE