Anchor tags ruining button grid layout

HTML-CSS
1

Hey!

I hope someone can help me with the following. I am trying to build a basic point and click game, not many moving parts besides linking several pages together for navigation. Running into this issue when linking my first button to the a page I just built for the link.

Clicking the button works great, does what I need it to do, displays the right page and stylesheet. But when I make the anchor tag around that button, it changes my buttons width to 1/3 of what I have it set to, and it eliminates any buttons I have in the code below the line I am trying to link.

I have been trying to google a solution, but I don’t see anyone having a similar issue like this. I looked at a few videos of people adding anchor tags to buttons, I basically copy what they are doing, but their preview window doesn’t change, mine does. I am at a standstill yet again until I figure this one out…

Thanks in advance for anyone who can shed some light…

  <body>
    <div class="container">
      <div id="text">Welcome!</div>
      <div id="option-buttons" class="btn-grid">
        <button class="-btn -bg -txt">Town</button>
        <button class="-btn -bg -txt">Mining</button>
        <button class="-btn -bg -txt">Smithing</button>
        <button class="-btn -bg -txt">Fishing</button>
        <button class="-btn -bg -txt">Cooking</button>
        <a href="http://127.0.0.1:3000/Woodcutting-page.html"><button class="-btn -bg -txt">Woodcutting</button></a>
        <button class="-btn -bg -txt">Woodwork</button>
      </div>
    </div>
  </body>

image

2

Buttons (interactive content) inside anchor elements are not valid HTML.

You can just style the link the same way as the buttons.

But if you make the button inside the link min-width: 100% it should work, but as said, it is invalid HTML.

3

Thank you.

Do you know what the proper way to link a button? What I am trying to do is when you click this button it brings you to the next page.

Just about any website you use utilizes this function, how are they doing so?

4

You do not need a button just a link.

5

So all of these sites and apps, none of those are buttons I’m clicking? Its a bunch of div’s to make it look like a button and its just a link?

6

I have no way to use the aesthetic of a button? I have to use something like the below?

image
image553×503 12.8 KB

7

If it links to a URL it is a link, not a button. It doesn’t matter what it looks like.

You can just style the links however you want. They can look like buttons and use the same styles as your other buttons.

I would however suggest you make sure the user can identify links as links and not make them look the same as buttons that are not links. Otherwise, it can be confusing UX.

It is also possible to use JS to make buttons open links but that is not a great idea.

8

Hmm. Thank you for all your info. I am having a hard time understanding what the common way to do this is. For example, the below picture. So that is not a button, but instead a link?

I am basically trying to make buttons just like that so when you press the ‘mining’ button it brings you to the mining page where you can select which ore you would like to mine.

image

9

If it takes you to a page and you can make it work as a link you should.

Quick example

<a class="start-btn" href="#"><i class="fa-solid fa-hand-point-right"></i> Press here to start</a>

.start-btn {
  all: unset;
  font-family: sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: white;
  background-color: #4CAF50;
  border-radius: 4px;
  padding: 1rem;
  cursor: pointer;
}

However, it is not uncommon for a page to use JS for something that looks like navigation. For example, a single-page app might use a button to trigger something that looks like navigation but is just a DOM update.

10

What is crazy is I copied your above code, and still got something like this.

I am blown away it is this difficult to mimic something I see on just about every website an app…

image

11

You must not be using the class correctly. The .start-btn class needs to be used as the selector and added to the a element. Or you are not linking to the stylesheet correctly.

I have no way of knowing what is wrong just from that image.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.