WordPress: Choosing the Right Click: Hyperlink or Button?

This guide provides guidance on when to use hyperlinks versus buttons, directly impacting user experience and site usability. By understanding the roles of each element, you can effectively guide visitors through your site, ensuring they engage with key content and calls to action. There are practical steps for implementing hyperlinks and buttons in WordPress, making it a handy resource for all users looking to optimize their website design.

DSB Marketing and Communications
20 steps
2 minutes

Healthleadershipacademy

Mcmaster

How to choose what to use!

When designing a website, every interaction matters. Whether you’re guiding users to another page or prompting them to take action, selecting between a hyperlink and a button can significantly impact usability and user experience. By using hyperlinks for navigation and non-critical actions and reserving buttons for high-priority interactions, you can create a user-friendly website that aligns with best practices. Let’s break down when to use each and ensure your design clicks with your audience.

### **Use a Hyperlink When:** 1. **Navigation to Another Page** - Linking to a blog post, resource page, or external website. - Example: "Read more about our services." 2. **Providing Additional Information** - Linking to terms and conditions or privacy policies. - Example: "View our Privacy Policy." 3. **Inline Text Links** - Embedding links within paragraphs or body copy for seamless reading. - Example: "Learn more about accessibility on our support page." 4. **Secondary Actions** - Actions that are not primary to the page’s purpose, like “Back to Home” or “FAQ.” - Example: "Return to homepage."

### **Use a Button When:** 1. **Call-to-Action (CTA)** - Prompting users to perform a primary action, like signing up, buying, or submitting a form. - Example: “Sign Up Now,” “Buy Now,” or “Submit.” 2. **Triggering a Dynamic Interaction** - Executing actions like opening a modal, triggering an animation, or starting a download. - Example: "Download File" or "Open Chat." 3. **Form Submission** - Allowing users to complete and send forms on your website. - Example: “Submit Feedback” or “Register.” 4. **Primary Navigation on Action-Oriented Pages** - Encouraging users to engage with a central feature, like booking an appointment. - Example: “Book an Appointment.”

How to Add a Hyperlink

Find the copy you want to hyperlink and highlight the test. In this example we highlight [[National Health Fellows Program]]

Click on the [[link icon]] in the formatting menu

This creates a pop-up box where we paste or type in the URL. Once added, please select the [[gear icon]], to access settings.

Click here.

For links that exit to another external website ensure you click "[[Open link in a new tab]]" so users do not lose your page. If this page is interlinking on your own website, you can leave this unchecked.

Once complete you click the [[update button]].

If that was your only change please scroll to the top of the window and click "[[Save]]"

To preview the changes, click the [[open in new tab icon]].

Scroll to your hyperlink and test the function. Ensuring it either opens in the current window, or in a new tab depending on what you selected.

Adding A Button

Using shortcode for a button is fairly simple. Below is the code: **\[degroote_button url="[[https://www.degroote.mcmaster.ca/]]" target="\_blank"\] [[Button Copy You See]] \[/degroote_button\]** You only replace the items highlighted. First is the URL, and ensure the " " remain or it will not work. Second is replace Button Copy You See with your button text. A good default is Learn More if you are not sure. This copy MUST be short or the button will break on mobile!

Scroll to the location you want to add your button. For this example it will be below a note to upload files for an application.

Paste the shortcode copy. Delete the current URL and replace with your own In this example we are replacing <https://www.degroote.mcmaster.ca/> with a mac drive link[ttps://macdrive.mcmaster.ca/u/d/0d036f83769a4995a3d4/](https://macdrive.mcmaster.ca/u/d/0d036f83769a4995a3d4/)

Next you replace the copy that will be seen on the button. We are using [[Upload Supporting Documents]] as our copy.

Once done click "[[Save]]"

And then use the [[open in new tab icon]] to preview and test the button.

We scroll to the button and click "[[Upload Supporting Documents]]" which opens in a new tab and is working properly.

Then we do the following to test on mobile: 1. Right click on the page with our mouse 2. Select inspect from the menu 3. Ensure "dimensions" are set to Pixel 7 (a mid-size phone)

This will show us the preview seen below, and we can audit out button copy. Clearly the length is too long, as it breaks into two lines. So we should go back and shorten the copy.

To shorten, we remove [[Supporting]], and it becomes [[Upload Documents]].

We save and preview again as mobile, and the button length is now one line and correct.

Now you are done!