I would like to disable the button animation on the click. As can be seen here, when clicking on the button, the button moves. Is there an easy way to disable this?
<Button styles={{ root: { ':active': { transform: 'none' } } }}>test</Button>
Related
I have a fontawesome icon with an onclick to act as a button. Everything works properly, but when I hover over the icon, my mouse doesn't change from a pointer into the finger.
How can I achieve this behavior?
This is the simple icon implementation:
<FontAwesomeIcon
className='text-white'
icon={faChevron}
onClick={this.next}
size='lg'
/>
In general, you can use CSS to change the mouse cursor like this:
.text-white {
cursor: pointer;
}
There are many other variants, see this MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
try
.text-white:hover {
cursor:pointer
}
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
is there any way that a bootstrap success button will look like same as a success button but it will be inactive.
The problem is when i make the success button inactive it change the color of a success button, looks fade, so it doesn't fullfill the requirement of a success button.
Anyone knows how make an success button inactive.
Your button :
<button type="submit" class="btn btn-success" disabled>Save changes</button>
Your css :
.btn[disabled]{
opacity: .65; //Comment this
}
You can do this by overriding the Bootstrap CSS:
.btn-success.disabled, .btn-success[disabled] {
opacity: 1;
}
The original value is .65, which makes the button greyed out.
But this way, all success buttons will look the same. Which is confusing for the user, and this is bad from an UX standpoint.
I noticed that on Iphone my button states are acting a little funny.
here's what's set up:
<button class="button follow">follow</button>
<button class="button unfollow" style>unfollow</button>
css:
.button {
background: green;
}
.button:hover, .button:active {
red;
}
when the buttons are clicked they perform an ajax function and alternate. I.E. if follow is showing and i click follow the ajax call is made and follow is hidden and unfollow is shown and vice versa.
My conundrum:
In mobile when I click a button the buttons swap, but the new button is rendered in it's active state (i.e. the background is red).
any idea on how to make sure the button does not get rendered in it's hovered/active state?
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.