The Correct Way to Wrap a Button with a Link

Question

Fairly new to coding html and css and want to make sure I'm keeping my code clean and closing tags correctly. I'm working with an html template and trying to correctly create links from my buttons.

The way I've wrapped them in Brackets is working properly on the page and the links are working correctly, but Brackets is showing some red tags meaning I've not wrapped something properly.

Could someone show me where I'm doing this incorrectly, as I'd like to follow good code form moving forwards.

Thanks so much.

Current code for the button below:

 <a href="contact_us.html"<button class="button -blue -bordered"><span class="button--inner">Contact Us</span></button></a>

you can either shape your `a` tag like a button or you can place the button within a form that has its `action` with the desired link — MrMisery, Aug 09 '17 at 13:17
Please look at this collection of answers for styling HTML buttons as links: https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — Our_Benefactors, Aug 09 '17 at 13:17
Why are you wrapping a button in an anchor? It doesn't really make sense semantically. A link takes you elsewhere, while a button initiates an action or submits a form. — Heretic Monkey, Aug 09 '17 at 13:17
Possible duplicate of [How to create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) — Our_Benefactors, Aug 09 '17 at 13:17
You cannot nest clickable elements inside of each other. Both `` and ` — Terry, Aug 09 '17 at 13:18
@Terry ... it is not valid, but it sure works with most browsers (at least with Chrome and Firefox) — lumio, Aug 09 '17 at 13:20
See lumio's answer, the no button way. There's no reason to use a button with a link. If it's a link, use a link and style just like you want. If you need a button for a form or a button as a simple button, use the correct button's type property and then go on with styles. — Luca Reghellin, Aug 09 '17 at 13:22
@lumio It is not valid, there's no *maybe* to that: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 — Terry, Aug 09 '17 at 13:25
I know. I'm just saying that browser allow it - but it is indeed no good practice at all and doesn't make any sense. — lumio, Aug 09 '17 at 13:26

lumio · Answer 1 · 2021-02-24T11:04:44.803

16

You need to close your link tag:

<a href="contact_us.html">
  <button class="button button-blue button-bordered">
    <span class="button--inner">Contact Us</span>
  </button>
</a>

BUT I wouldn't wrap a button with a link and instead style the link as a button.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<a href="contact_us.html" class="btn btn-primary">Contact Us</a>

Also look at this answer as Our_Benefactors stated in the comments: How to create an HTML button that acts like a link?

edited Feb 24 '21 at 11:04

answered Aug 09 '17 at 13:18

lumio

7,428
4
40
56

Thank you, I knew it was something tiny. Much appreciated. – cocktailsanddreams Aug 09 '17 at 13:22

Suresh M Sidy · Answer 2 · 2017-08-09T13:23:16.983

0

There is a small mistake actually.

You forget > for <a> tag.

Try this.

 <a href="contact_us.html">
   <button class="button -blue -bordered">
       <span class="button--inner">Contact Us</span>
   </button>
</a>

edited Aug 09 '17 at 13:23

answered Aug 09 '17 at 13:18

Suresh M Sidy

113
1
11

score 0 · Answer 3 · answered Aug 09 '17 at 13:18

0

You are missing a > bracket for the HREF.

<a href="contact_us.html"> <!-- THIS ONE HERE -->
     <button class="button -blue -bordered">
         <span class="button--inner">
              Contact Us
         </span>
      </button>
</a>

answered Aug 09 '17 at 13:18

Ben Temple-Heald

708
1
6
16

The Correct Way to Wrap a Button with a Link

3 Answers3