I have a <button> with a hyperlink tag inside, looks like this:
<button class="btn"></button>
This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).
What's wrong?
To make it work in all browser, Firefox too you have to change it to
<button class="btn"></button>
or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do
GO
Probably better to just do this:
Go!
This issue is happening in FF and IE(< 10).
The browser simply doesn't like the tag button when it's used as a link.
Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).
However, you can use in a form (submit button for instance) and you shouldn't have an issue.
You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:
<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag
<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
Nesting an <a> tag inside a <button>, or vice versa, violates HTML rules and will not pass a code validator:
"The element <a> must not appear as a descendant of the <button> element."
If you want your button to behave like a link, or your link to look like a button, you can style your link to look like a button with CSS or Bootstrap, as shown by Billy Moat's answer,
OR
you can use location.href in the button tag:
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>
<button onclick="window.location.href='/css_page.html'">CSS page</button>
This worked for me to retain bookstrap btn-group stylings:
<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
Related
I try this html code on Google Chrome and works. But on Mozilla and IE11 don't works link. Why? Thanks all
<button>
<span>
Home
</span>
</button>
But on Mozilla and IE11 don't works link. Why?
Because it is invalid HTML - you can not nest other “interactive” elements such as a link into a button.
HTML5, 4.10.6. The button element:
Content model:
Phrasing content, but there must be no interactive content descendant.
I guess you're trying to do something like this.
Code
<button class="btn btn-primary" type="button" [routerLink]="['/home']">Home/button>
It is not working because it is not allowed w3 specifications
is not allowed inside
Better to make a input with the href
This is my code, when I take away the span tag it works, did i do something illegal?
<center><button class="btn" href="about.html"><span>About</span></button></center>
You should be using anchor tags
<button class="btn"><span>About</span></button>
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
I have code that's loosely based on the CSS of Bootstrap. One thing I did different is I placed the .btn class inside a button. However it seems like there are many times when the spacing is different and I cannot work out why.
Can anyone give me some advice here. Is it a nono to place the .btn inside a <button> element instead of a <div> when I am using all of the standard CSS for bootstrap?
My guess is that it permits to visually customize more your element when using a div (or an a tag) than when using a button tag since button tag has more associated attributes.
You are likely not wrapping the buttons with a <div> with the .btn-group class.
For example:
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
</div>
There are many additional class modifiers you can add. Check out the component button-group documentation.
Times where you may not use the <button> element would be if you have <a> acting as a button in a <ul>, or in an HTTP Form where you'd want the <input> element to be the button.
I have used <a> tag inside <div> which is not working in IE
my code structure is like :
<div>
<a target="_top" href="address">
<button>
</button>
</a>
</div>
So It is working fine in all browsers except IE.
When I click on button it is not redirected to specified url from tag.
What you are doing is not recommended - don't wrap a button in a link. Style your link like a button or use an onclick:
<button onclick="window.open(href);">
</button>
(Addendum: Just for accessibility, don't use target on your links since it messes with people who use screen readers. Only apply a target after page load when there is javascript available. Also, people like to control where their new page opens - it's not something you should try to dictate too much.)
button tag is only allowed within a <form> tag. Since there is no form, IE is ignoring this. Other browser have a more defensive "do what I mean" parser probably ...
You might do it like this:
<input type="button" onClick="document.location='address'; return false" value="click me" />