Creating HTML Button Links

Product Support
, ,
#1

How to create an HTML button link?

#2

With over 5 years of experience in front-end development, I’ve explored several ways to create an HTML button that functions as a link. One basic method involves using a form that submits to a target URL. Here’s a simple example:

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Alternatively, you can style an anchor tag to look like a button with some basic CSS. This not only makes it visually appealing but also keeps your code clean:

<!-- HTML -->
<a href="https://google.com" class="button">Go to Google</a>

<!-- CSS -->
a.button {
    padding: 1px 6px;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    background-color: lightgrey;
    text-decoration: none;
}

For those using CSS frameworks like Bootstrap, it becomes even simpler:

<a href="https://google.com" class="btn btn-primary">Go to Google</a>
#3

That’s quite comprehensive, Vindhya! For a quick fix in projects where simplicity is key, I often use a plain HTML method that avoids extra styling or scripting. During my 3 years of working with web technologies, I’ve found this to be an effective approach:


<a href="/link"><button>Link</button></a>

This method seamlessly integrates the button within a link, making it straightforward for both developers and users.

#4

Both methods you’ve described are great, Vindhya and Richaa. Adding to that, for those who need more flexibility in styling, particularly when dealing with legacy projects or specific design requirements, here’s another technique I’ve used during my 7 years as a web designer. It involves using a <div> to wrap the <a> tag, which provides a better structure for CSS manipulations:

<div><a href="yourUrl" class="styleToLookLikeButton">buttonText</a></div>

This technique allows for more complex styling opportunities while keeping the HTML structure clean and accessible.