I'm currently working on a web project and I changed the Bootstrap's primary button color to orange. Now almost all button states work fine: active state, hover state, etc - except the loading state.
Once it enters the loading state, it returns to its default color which is blue.
I was searching on how to do it but seems I can't seem to find it. Can anyone help me out with this or if this question already exists, please redirect me to it. Preferably, I'd like to do it without javascript. Thanks!
This one rather can't be done without using JavaScript.
First way, if you aren't afraid of JS: jsfiddle
HTML:
<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary">
Loading state
</button>
CSS:
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
border: none;
margin: 5px;
background-color: #b2d025; /* here */
}
JS:
$("#btn1").click(function() {
var $btn = $(this);
$btn.button('loading');
$(this).css('background-color','#b2d025'); /* and here */
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
Second way (less js, more css, using !important): jsfiddle
You can use Inline CSS
<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary" style="background-color:red">
Loading state
</button>
Note : This will gives your answer but hover and active effects will not work
Did you try using bootstrap's customize
I think they have an option for changing the color of primary button. Look for btn-primary-color
If you don't want to use javascript than you can try this..
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus:hover {
border: none;
background-color: #b2d025;
}
Hope this helps...
Related
index.html:
<div>
<span>
<button disabled>
Button 1
</button>
<button>
Button 2
</button>
</span>
</div>
index.less:
:not(&[disabled]) button {
background-color: red;
}
This gives the below output. Both buttons are colored red but I am trying to target only button that is not disabled.
Is there a way to do this? I am specifically looking to target buttons that are not disabled.
Here is the jsfiddle : https://jsfiddle.net/6gqb19e3/36/
I am new to LESS and my syntax was wrong. After bit of trial and error, I came up with this:
button {
background-color: grey;
&:not([disabled]) {
background-color: green;
}
}
and it gives this output:
Here is the jsfiddle with: https://jsfiddle.net/6gqb19e3/81/
I have three buttons. They have an animation when hovered over. I load my file with the ejs render engine. I want to have different animation colors for the three buttons, and set these dynamically when I send the html page.
I tried something like this:
<button class="button button--style" onclick="window.location.href='/location'" style=":after {background: <%= color %>;}">Button 1</button>
All the animation is defined throught button-style, I also define the after style there:
.button--style::after {
background: #f00;
}
How could I achieve this?
You'll have to use classes instead and set your classes in code behind. As mentioned, you can't use pseudo classes in a style tag;
<button class="button button--style" onclick="window.location.href='/location'" class="<%= class1variable %>">Button 1</button>
class1::after {
background-color: #F0F0F0;
}
class2::after {
background-color: #BLAH;
}
Similar to the classic bootstrap disabled state -
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
I'd like to simulate a disabled state on an Angular Materials svg icon using cursor: not-allowed css. But I want to disable the click event.
.toolbar-icon-disabled {
fill: gray;
cursor: not-allowed;
pointer-events: none;
}
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon>
Problem here is that I CANNOT use both not-allowed and pointer-events: none, as they appear to be mutually exclusive.
ex/ Here you can see that my left-most icon appears disabled, as the fill color is gray; however, it's still clickable if I add cursor: not-allowed.
I couldn't copy/paste the not-allowed circle from my screen, but here's an example:
Suggested work around:
1) Put the mat-icon in another anchor tag and add curson not allowed to that anchor.
HTML:
<a [class.linkDisabled]="true"><mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon></a>
CSS:
.toolbar-icon-disabled {pointer-events: none;}
.linkDisabled {cursor: not-allowed;}
2) keep the 'cursor: not-allowed;' in the css and i am assuming that there will be an event listener on the icon to do some action. Go into that method, check for the disabled condition and return if true. For example:
html:
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="flgDisabled" (click)="onClick()"></mat-icon>
method:
onClick() {
if(this.flgDisabled) {
return
}
console.log('called');
}
I have a problem with a button.
I want to fix that gray effect on click but i don't know how to do so.
<div class="col-lg-7 col-sm-5 col-md-11">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Look for something cool">
<div class="input-group-append">
<button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
</div>
add this to your css
button:focus {
box-shadow: none !important;
outline: none !important;
}
PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)
Do you mean the hover? if so create some custom CSS that states:
.btn-outline-secondary:hover{
// YOUR STYLES HERE (the grey comes from the background so...)
background: red (or whatever you want)
}
I think you are referring to the outline of the button when clicked/focused.
here is the CSS you might consider:
.btn:focus {
outline: 0;
}
Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome
I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted.
I am using following code:
<button type="button" class="btn btn-default">New</button>
<button type="button" class="btn btn-default">Used</button>
<button type="button" class="btn btn-default" autofocus>Any</button>
So you want JSFiddle?
CSS
.active {
color: #F00;
}
JS
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
}
HTML :
<button id="highlight" ..... ></button>
CSS :
#highlight, #highlight:hover, #highlight:active, #highlight:focus {
color://any-color;
// more css
}
NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.
Try
var yourbuttons = document.getElementsByClassName('highlight-hover');
for (var i = yourbuttons.length - 1; i >= 0; i--) {
var currentbtn;
yourbuttons[i].onclick=function(){
if(currentbtn){
currentbtn.classList.remove("highlight");
}
this.classList.add("highlight");
currentbtn=this;
}
};
There's not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here's a working version of what it seems you want because i'm bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked
First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals .
$('#myModal').on('shown.bs.modal', function () {
$('#button3').focus()
})
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active.
So add .active or .focus to the button that you want to highlight always.
<button type="button" class="btn btn-default active">Any</button>