Buttons vs Links: Choose the Right Website Control
Should that website control be a button or a link? The right element helps people understand what it does.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: Links lead to destinations
Use a link for a page, section or downloadable resource.
On-screen labels: Another page; Page section; Downloadable file.
-
Step 2: Buttons perform actions
Use a button for tasks such as submitting or opening a dialog.
On-screen labels: Submit a form; Open a dialog; Change a setting.
-
Step 3: Appearance is a separate choice
A link can look like a prominent action while keeping link behaviour.
On-screen labels: Visual styling; Correct element; Expected behaviour.
-
Step 4: Use a useful label
The words should explain the destination or action.
On-screen labels: View the service; Send your enquiry; Save the change.
-
Step 5: Keep keyboard behaviour familiar
Links and buttons have different expected activation keys.
On-screen labels: Enter for links; Enter or Space for buttons; Visible focus.
-
Step 6: Test the promised result
The control should do what its wording leads people to expect.
On-screen labels: Correct destination; Working action; Clear feedback.
A practical check for your business
Choose a control and describe its intended result: moving somewhere or performing an action. Review whether its wording, behaviour and keyboard interaction match what a visitor can reasonably expect.
Sources and further detail
Common questions
Should that website control be a button or a link?
The right element helps people understand what it does. Use the right element and a clear label.
Go further
More video tips
All 205 videos →
Reduced Motion Explained: Make Website Animation More Comfortable
Respect the visitor preference.
Browser Zoom: 6 Checks for a More Readable Website
Check the enlarged page.