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>
Related
I'm using bootstrap 4 alpha, and it seems that the cursor on buttons has been removed for buttons but not anchor tags. example on the bootstrap site.
https://v4-alpha.getbootstrap.com/components/buttons/
In my application i have a form, with two buttons, one is to post to the form and the other is to redirec to another page. The input doesn't display the cursor but the anchor does. I know i can create a custom css class, but is there a reason why this has been removed or is it an issue with the current alpha version?
<input type="submit" value="Sign In" class="btn btn-primary" />
<a role="button" href="#Url.Action("Register", "Account")" class="btn btn-secondary">Register Now</a>
Here's your explanation - https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
I'm not sure Bootstrap v4 adds that on anchor elements either (can't check at the moment), but what I do know for sure is that browsers add the cursor by default whenever a link has the href attribute.
LE - The stable release was launched a week ago and it now features
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
Announcement at https://blog.getbootstrap.com/2018/01/18/bootstrap-4/
add class="btn"
it causes the cursor to be pointer
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 to set of buttons one have no icon and one have icons. i want to define a special css which has no icon..
My codes are
for first type of button:-
<div class="btn-double-horizontal">
<button type="button" class="btn btn-lg btn-base-white border-base thin">register now</button>
<span>or</span>
<button type="button" class="btn btn-lg btn-base-white border-base thin">login here</button>
</div>
and for second type (with icon):-
<div class="btn-double-horizontal">
<button type="button" class="btn white rounded bg-wisteria btn-lg"><i class="fa fa-instagram white bullet"></i>Instagram</button>
<span>or</span>
<button type="button" class="btn white rounded bg-green-sea btn-lg"><i class="fa fa-linkedin white bullet"></i>Linked in</button>
i want to apply style for buttons which has no icon.Obviously they are both btn-lg (class)
If I'm understanding this correctly, you want to target the first type of button you laid out in your question, correct?
If so, since the two button types don't share all the same classes, you could do something like this:
.btn.btn-base-white {
/* This targets the first type of button only */
}
This doesn't require the use of the :not() selector, which really is only an issue in IE8, but I don't know what browsers you need to support, so better safe than sorry.
Of course, this assumes you can't add another class. If you can add a new class to the buttons without an icon, that may make your CSS easier to work with down the road...
In your examples, .btn-lg:not(.btn-base-white){...} would do the trick, if you want to use :not()
If you are trying to apply the special CSS to all buttons that do not contain an icon, you will have to add an icon class to buttons that contain an icon. Then use can target them with button:not(.icon). You can not look for buttons that do not contain an icon in CSS because there is no parent selector
Example:
.button{
/* button css */
}
.button:not(.icon){
/* button with no icon css */
color: #f00;
}
<button class="button icon">icon</button>
<button class="button">no icon</button
1) The best way to do this is to make 2 custom classes:
First: With the icons (.with-icon)
.with-icon{//code for iconed button goes here. }
Second: Without icons (.no-icon)
.no-icon{//code for non-iconed button goes here. }
And, then do the required changes based on the 2 classes for your both item types.
2) For your present case scenario, you might make use of the classes that are already in your 2 types of buttons, viz.
.btn-base-white {//code for non-icon button goes here }
.bg-wisteria {//code for iconed button goes here }
3) If you still want to use .not then go as follows:
button:not(.btn-base-white ) {//code for iconed button goes here}
button:not(.bg-wisteria) {//code for non-iconed goes here}
Hope, that helps!
I am trying to make Disqus comment counter link in Bootstrap button, but everything I tried was unsuccessful.
The idea is that the whole button should be link.
When I am trying to do like this:
<a href="page.html#disqus_thread">
<button type="button" class="btn btn-default"></button>
</a>
the Disqus just overwriting everything about Bootstrap button CSS and just leave naked link like "1" (I left just number in disqus settings).
When I am trying this way:
<button type="button" class="btn btn-default">
</button>
the button appears, as well as comment counter link, but the button is not the link like if it was wrapped into <a> tag. So I need some help.
What you are trying is not valid HTML. Try something like this:
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>