<a> tag using Bootstrap class="btn" not working as intended

<a> tag using Bootstrap class="btn" not working as intended
0

#1

Hey it’s me again. This time I have a question about this piece of code:

<a id="search_link1" href="#" class="btn btn-default" role="button">Search result 1</a>

Link to the actual Codepen is: https://codepen.io/glennqhurd/pen/oomXmq?editors=0010

What I’m trying to do is use buttons that when clicked redirect the user to a Wikipedia page. If I use this:

<button href="example_URL" class="btn"></button>

I get a very nice looking button object but it doesn’t link properly. When I use the above example w/ <a> tag then the link works fine but it’s a strict text link instead of the button I want. I looked up online at Stack Overflow and they suggested the syntax I was using in the very first code example but it’s still not working as intended. I’m so close to getting this done, after I get the buttons to work with the search function I’m going to add a continue search button below the 10 choices so you can move on to the next options. Just have to get past this hurdle!


#2

A button is used for a form, in order to use it like a link

<button href="example_URL" class="btn"></button>

You must use it like this

 <button class="btn btn-primary" onclick="window.location.href='/page2'">Continue</button>

OR

 <form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit">Submit</button><br>
  <button class="btn btn-primary" type="submit" formaction="/action_page2.php">Submit to another page</button>
</form> 

I found the resources here
https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link
https://www.w3schools.com/tags/att_button_form.asp
https://www.w3schools.com/tags/att_button_formaction.asp


#3

<button id="btn_link" class="btn btn-default"> <a href="#"> Continue </a> </button>

This will create a button with any bootstrap class as you want… The color of link’s text can be changed using css, and the click event is easy to do with JS getting the element by ID and adding a Event Listener…

I’m not sure if this is what you answer, but i hope help you :slight_smile:


#4

@rafawashere I’ll check this out, I was using some sources on the Bootstrap docs that said it would work the way I want it to.

@Dodd I tried what you suggested and what that does is it creates link text that does redirect but you have to click on the text itself, the rest of the button doesn’t do anything when pressed which is not what I want.


#5

All you need to do is add Bootstrap to your Codepen project. Check out this link for more details. You can reach the resources screen by pressing the gear icon next to CSS.


#6

I already added bootstrap to my Codepen, I’m not getting error messages the button just doesn’t function using href as intended.


#7

Ah, I misread your question and was confused because the Bootstrap styles aren’t showing. I see that you added the Bootstrap JavaScript code, but you also need to add the CSS. I think this is the cause of the problem you’re trying to solve by changing links to buttons.

As to your actual question, @rafawashere has the right answer. The way to get a button element to work as you want is to have it change the browser location in JavaScript. This is a bad idea for a few reasons. First and foremost, links should be in anchor <a> tags. This isn’t just some nonsense rule to make your life more difficult, but an application of semantic markup (which is a big deal to employers). A user who’s got a mouse or a touchscreen isn’t going to care one way or the other if they’re clicking on a <button> or <a>nchor tag, but a user who relies on assistive tech certainly will. Screen readers for the blind and keyboard assistance for the physically handicapped use these tags to properly guide the user, and if you’re using <button>s to link to other pages, it could screw with their experience. Also, some privacy and security browser plugins don’t like when the location is changed in JavaScript.

Getting your CSS resources in order should get you what you want.