HTML Button Hyperlink – Code Reference
Copy-paste ready snippets for designers and developers
Overview
There are three standard ways to attach a hyperlink to a button in HTML. Each method suits
different scenarios. All three open the linked page when clicked.
Method 1 – Wrap a <button> inside an <a> tag
Simplest approach. Use when you already have a <button> element and just need to navigate.
<a href="[Link]">
<button>Go to Problem Page</button>
</a>
How it works:
• <a href="..."> is the link wrapper — set the destination URL here.
• <button> is the visible clickable element.
• Clicking anywhere on the button triggers the link.
Method 2 – Style an <a> tag to look like a button (RECOMMENDED)
Best practice. No <button> tag needed — just a styled anchor. Cleaner HTML and easier to customise.
<a href="[Link]" style="
background-color: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 8px;
font-size: 16px;
">
Go to Problem Page
</a>
Key CSS properties used:
• background-color – fill colour of the button.
• color – text colour (use white on dark backgrounds).
• padding – inner spacing (top/bottom left/right).
• text-decoration: none – removes the default underline.
• border-radius – rounds the corners.
Method 3 – onclick with JavaScript
Use only when the button already contains JavaScript logic. Otherwise prefer Method 2.
<button onclick="[Link]='[Link]'">
Go to Problem Page
</button>
How it works:
• onclick fires a JavaScript expression when the button is clicked.
• [Link] changes the browser URL, navigating to the target page.
Quick Comparison
Method Best For Recommended
Method 1 Quick and simple, existing <button> –
element
Method 2 Clean, professional look — new buttons Yes
Method 3 Button already has other JS logic –
Live Example – Your Save Earth Project
The three pages in your project are already linked using Method 2 (styled <a> tags). Here is the
nav bar code used on every page:
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Problem</a>
<a href="[Link]">Solutions</a>
</nav>
To add a standalone call-to-action button anywhere on a page, copy this snippet:
<a href="[Link]" style="
background: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 8px;
font-size: 16px;
">
View Solutions →
</a>
Designer Tips
• Always test navigation links by opening [Link] in a browser — not by double-clicking
[Link] directly.
• All three HTML files ([Link], [Link], [Link]) must be in the same folder.
• Place [Link] in the same folder as [Link] for the image to load.
• Swap green for any hex colour (e.g. #2e7d32) to match your colour scheme.
• Add hover effects using CSS: a:hover { opacity: 0.85; } inside a <style> block.