How to Make My Hyperlink Look Like a Button

Mouse clicks can trigger hyperlinks even when links appear to be buttons.

Hyperlinks on many websites appear as underlined text. However, you have the power to make links on your website look like anything you want. Add a URL property to an image tag or transform links into buttons using simple HTML. Users usually understand that button-clicks cause things to happen on Web pages. Surprise them by transporting them to a new Web page when they click a hyperlink that looks like a button.

Instructions

1. Launch Notepad or an HTML editor.

2. Open one of your Web page documents and locate its "body" section.

3. Add the following code anywhere within that section:

   <input type="button" value="Visit the White House" onclick="window.location.href="http://www.whitehouse.gov" />

   This creates an HTML button. The URL points to the White House website in this example. The button contains an "onclick" event. That event executes the "window.location" method that redirects the browser to the URL specified in the "href" property.

4. Save your document and view it in a browser. Click the button that appears on the Web page. The button-click functions like a hyperlink and causes the browser to navigate to the White House website.

Tips & Warnings

• To cause the browser to navigate to another site when users click the button, replace "http://www.whitehouse.gov" with a URL of your choice.

• Customize your button text by changing the value of the "value" property. In this example, the value="Visit the White House". Replace "Visit the White House" with any descriptive text you like. Site visitors will see that text on the button.

References

• W3schools: Location Object

Resources

• Tizag: HTML Tutorial - Introduction