On my site 33hotels.com I am using Buttons, such as provided by Twitter Bootstrap, to indicate hotels' amenities.
What I need is to clearly display that an amenity is absent.
For this, I am already displaying the button in red with text crossed by horizontal line. However, from user testing feedback, this is not enough to deliver the message that the amenity is absent. So I need something more clear.
I am thinking of putting a Large cross (letter 'X' or an icon) on top of the button, of the size of the button. The cross should be thin as not to obscure the text but still clearly visible.
My questions are:
How do you put an 'X' on top of a button?
Any elegant and re-usable way to do it?
Maybe define a web component or Angular directive "crossed" that can be attached to an HTML Element?
EDIT. Made my question more clear - I need to put a large X of the size of the button.
EDIT 2: Here is the ugly version of what I'm trying to achieve. However, apart from being ugly, it fails to make the text crossed readable. So perhaps I should use a thinner version of 'X'?
EDIT 3: Here is as good as I could get, not too pretty :(
http://cl.ly/image/1H1p0n2V2200
This is How you do it >> Close button
html
<button class="btn btn-default">End Tour<div class="closebox">X</div>
css
button {
position:relative;
}
.closebox {
position:absolute;
opacity:0.5;
top:-30px;
right:0;
left:0;
font-size:5em;
}
In your case, following code will work for you
<div class="btn push ng-binding btn-default"
ng-class="feature.selected ? 'btn-primary': 'btn-default'"
ng-mousedown="toggleFeature(feature, category, $event)"
ng-bind="feature.name">
<span style="position: relative;top: -9px;float: right;right: -9px;">×</span>
Courtyard
</div>
you can do it using css dynamic content via content:"X" and placing the style on your button element utilizing pseudo-elements for placing the content....
my example is entirely too specific with sizes and positioning: i just wanted to show you how you could do it:
http://jsbin.com/hijaw/1/
Maybe you can use font-awesome or glyphicon to represent when an amenity is absent or not (ok or cross icon + amenity name). Very easy to use and you will avoid to use images or dirty CSS. check Bootstrap 3 examples in:
http://fortawesome.github.io/Font-Awesome/examples/
with bootstrap 3, you can do something like below
<button type="button" class="close">Close
<span aria-hidden="true" style="font-size: 20px">×</span>
</button>
EDIT
another example with font-aswesome
<button class="btn btn-default btn-sm" >
<i class="fa fa-times"></i> Settings
</button>
EDIT 2
to change the size
<button class="btn btn-default btn-sm" >
<i class="fa fa-times" style="font-size: 1em"></i> Settings
</button>
you can increase font size using style on tag
Related
I'm trying to create buttons like you can see below with Bootstrap 4:
The icon (font awesome) should be centered to the text and all the icons have the same y position on the screen. The border of the buttons should be invisible.
Do I have to use a button or is it better to use another element? Any help is welcome.
With Bootstrap 4 and Font-Awesome, if you want to place the icon to the left of the text, use the following snippet
<button class="btn btn-lg" style="background-color:transparent;">
<i class="fa fa-pencil"></i> Edit
</button>
Create a div and then put font-awesome icons into it and then write text then provide necessary css and then you can use (click) event on the div.
Install bootstrap and font-awesome
and then provide the path in the 'styles' of angular-cli.json.
or,
<button class='btn btn-lg ' style='background-color:transparent;'>
<div style='text-align:center;'><i class="fa fa-times"></i></div>
Cancel Reservation
</button>
Try out this. It will solve your query.
<i class="flaticon2-pie-chart"></i> Success
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 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 a lightbox appear when a button is pushed. Problem is, when the anchor is around the button (like in the code below), it automatically redirects to "mywebsite.com/myimage.jpg". However when the anchor is inside, only clicking the text will pop the lightbox. Here is the code:
<a href="myimage.jpg" rel="lightbox" title="Title!" style="color:white" class="lightbox">
<div>
<button class="btn btn-lg btn-block" style="background:red">Button Text!</button>
</div>
</a>
Anchors and buttons have two different intended purposes, though Bootstrap allows you to style either as a button. Pick one. Using both is just bad practice.
<a href="myimage.jpg" rel="lightbox" title="Title!"
class="lightbox btn btn-danger btn-lg btn-block my-button-class">Button Text!</a>
The .btn-danger variant gets you the white-on-red scheme you seem to be going for. See http://getbootstrap.com/css/#buttons-options.
If this doesn't solve your problem you'll need to be more clear about which lightbox plugin you're using and what properties it's looking for.
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: