A call to action asks someone to take a next step. It may be a link, a button or nearby text. A useful one makes the action and its consequence clear without relying on pressure or vague enthusiasm.

Match the label to the destination

Use a link for a next lessonLink

HTML and CSS

HTML

<p>Ready to practice the box model?</p>
<a href="#practice">Open the practice exercise</a>
<section id="practice">
  <h2>Practice exercise</h2>
  <p>Compare space inside and outside a border.</p>
</section>

CSS

a {
  display: inline-block;
  padding: 0.7rem;
  border: 1px solid #2563eb;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

The label says what the link opens. The destination exists in this document. A live page should use its actual lesson URL rather than a dummy link.

Use a button for an action

If the control submits a form, starts playback or changes a setting, use a button. If it goes somewhere, use a link. Appearance does not determine semantics.

Place the action where the reader has the information needed to decide. Include costs or prerequisites when relevant. Do not promise that stronger wording guarantees more conversions; verify the task and outcome. Try the action with a keyboard and check that its result matches the label.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.