Button link HTML CSS

An HTML button is generally used to submit a form. However, you can create a button that works like a link. There are a couple of ways to make a button link. I mentioned them below.

Table of Contents show

Add a link to the button using JavaScript

<button onclick="window.location = 'https://shihabiiuc.com'">Learn more</button>

Here the “onclick” is one of many JavaScript events.

You can put any link between the single quotes. And by clicking the button, it will redirect you to the destination.

Relative link path

In the above example, it’s an absolute path. If you need to add a relative link path, use the following example below.

<button onclick="window.location = './about.html'">Learn more</button>

Here the “./” refers to the same directory as the file you’re editing. If you have the “about.html” in a folder called “pages” then the relative path will be this:

<button onclick="window.location = './pages/about.html'">Learn more</button>

Open the button link in a new tab

<button onclick="window.open('https://shihabiiuc.com')">Leran more</button>

In the button link (using JavaScript), you can’t use the “target=_blank” attribute. To open a button link in a new tab, you have to use “window.open” instead of “window.location.”

Wrap the button within the anchor tag (another method)

The first example works without any problem. However, here is another way that you may already know.

You can wrap the button in an anchor tag <a> to make it act like a link. See the example below.

<a href="https://shihabiiuc.com"><button>Learn more</button></a>

Change mouse to cursor on hover

Now if you hover any of the buttons, the mouse cursor remains the same. You will definitely want the cursor to be a pointer just like a link behavior. Use one line of CSS to do that just.

button {
  cursor: pointer;
}

Do you also need other CSS to style the button such as color, font, box-shadow, etc? Please let me know.

Learn more about buttons

Learn more about HTML links

Conclusion

Now you know how to create an HTML button that works like a link. Also, I gave you multiple examples. If you still have any questions, please let me know.