Anchor <a> tag breaks layout

Hi guys, this is what happens when I try to add a link to the website:


Here is the code:

<div class="project-1">
            <div class="project-1-grid">
             <div class="thumbnail-1"><img id="hex-code-img" src="imgs/hexCodeProject.png"></div>
              <div class="title-1"><h4>Color Randomizer</h4></div>
               <div class="description-1"><p>A simple webpage that randomly displays a different color and its Hex Code when a button is clicked.</p>
                <button type="button"><a href="https://backgroundcolorrandomizer.imfast.io/hexChangeBackgroundColor.html" target="_blank">GO!</a></button> 
            </div>
           </div>
           </div>

The parent div is wrapped up in another <a> tag to navigate smoothly clicking on the navbar. Also, I’ve tried to wrap the secont <a> tag around the button, but whatever I try it doesn’t seem to work.

Thank you for your help

Generally you’d use either a button <button> or an anchor <a>. Not sure why you’d want to combine both.
Here’s a helpful guide; A Complete Guide to Links and Buttons

You can’t put an anchor inside a button, this is your problem. Some browsers will literally move the a outside the button in the rendered HTML (to counteract the fact that you’ve made an error). The logic cannot work here, it has to be either/or. An anchor and a button are both for clicking. So when you click the button, you can’t somehow tell the browser that you didn’t mean to click the button, that you wanted to click the clickable thing inside it. It doesn’t logically make any sense. If you want an anchor, use an anchor, if you want a button, use a button.

1 Like

thanks for the input, but I deleted the button tag and only used the anchor tag but it doesn’t work anyway…

Thanks, but maybe there is also another problem because I did as you suggested, i deleted the so that there is only the anchor tag, but it still doesn’t work

So that <a> is wrapped, higher up the tree, in another <a>? Because if so, that’s going to cause the exact same issue as wrapping anchors in buttons, you can’t do this. Inspect the rendered HTML. Is the anchor you’ve added in the place you expect it to be?

1 Like

Thank you, it works now :muscle:t2:

1 Like