Buttons, links, and focus states

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Buttons, links, and focus states—the ideas, syntax, and habits you need before moving on in HTML & CSS.

Without a solid grasp of Buttons, links, and focus states, you will repeat mistakes in HTML & CSS exercises and on real pages or scripts.

You will apply Buttons, links, and focus states in contexts like: Landing pages, dashboards, marketing sites, and portfolio pieces built without a framework.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Buttons, links, and focus states in your own words.

Navigation uses links; actions use buttons. CSS makes them look similar, but the underlying HTML must stay honest for keyboard and assistive tech.

Decision guide

Go somewhere → <a href="...">.
Do something here (submit, toggle, open menu) → <button type="button"> or type="submit".
New tab → target="_blank" plus rel="noopener noreferrer" for security.

Focus styles matter

Never remove focus outlines without replacing them. Use :focus-visible for keyboard-friendly rings that do not flash on mouse clicks.

Practice

Tab through controls—notice :focus-visible styles.
Change .btn-primary padding and border-radius together.

Important interview questions and answers

Q: Why not use `` as a button?
A: It navigates (hash history), lacks button semantics, and behaves wrong for forms/dialogs.

Q: What does `rel="noopener"` do with `target="_blank"`?
A: Prevents the new page from accessing `window.opener` on your tab.

Q: How should focus be styled?
A: Visible, high-contrast outlines or rings—often via `:focus-visible`.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What part of this lesson needs a second read?
What would you try differently in a real project?