I styled my button everything is cool but can't change the blue color on click.
<button type="button" class="btn btn-primary">Log In</button>
.btn.btn-primary:focus {
background-color: and here color
}
doesn't work
The hover state has priority over the active or focus. You can see it on the snippet as both element has a color change for active, but only on for hover.
.btn:active { background-color: red }
.btn.btn-primary:hover { background-color: green }
<button type="button" class="btn btn-primary">With hover</button>
<button type="button" class="btn btn-secondary">No hover</button>
To solve this, you need to specify the order, and be clear in your selectors.
hover selector needs to be before the active selector.
.btn.btn-primary:hover { background-color: green }
.btn.btn-primary:active { background-color: red }
<button type="button" class="btn btn-primary">Button</button>
You need to override each pseudo-selector for the button that you want to change.
If you want to avoid using !important, then you are going to need to override a couple more selectors that Bootstraps sets. I commented these out in the snippet for simplicity's sake.
.btn.btn-primary {
background-color: orange
}
.btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
background-color: orange !important;
}
/*
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
background-color: orange;
}
*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-primary">Log In</button>
Use
.btn:active {
background-color: red;
}
Related
I'm far from an HTML wizard but do want to create a simple bootstrap button in html that I can enable and disable. My question is, assuming this is a bootstrap button:
<div class="button" onClick=doSomething >My Button</div>
would this be the proper way to keep the same button from being clicked?
<div class="button disabled" onClick=doSomething >My Button</div>
Thanks
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Just switch classes btn-primary/btn-secondary and disabled state.
See documentation: Buttons - Bootstrap
You have a rather odd request here. I'm not sure why you aren't using Bootstrap classes, a button element, and the disabled attribute:
function go() {
console.log('went');
}
body {
padding: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<button type="button" class="btn btn-primary" onclick="go()">Button</button>
<button type="button" class="btn btn-primary" onclick="go()" disabled>Button</button>
That said, you can turn off pointer events for any element with CSS:
function doSomething() {
console.log('clicking happened');
}
.disabled {
pointer-events: none; /* <-- here's your huckleberry */
opacity: 0.65;
}
.button {
display: inline-block;
background: #ddd;
padding: 4px;
margin: 2px;
border: 1px solid #ccc;
cursor: pointer;
}
<div class="button" onClick="doSomething()">"Button"</div>
<div class="button disabled" onClick="doSomething()">Disabled "Button"</div>
I have a tooltip, and I want to change his background. The default background is black.
<ng-template #start>Start</ng-template>
<button [ngbTooltip]="start" type="button" class="btn btn-outline-danger">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
Could you, please, help me with this?
There need to be couple of css changes,
Check stackblitz demo Here
You need to add below css to the root style file. Replace red with your desired color.
/* Add application styles & imports to this file! */
.tooltip-inner{
background-color: red!important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
border-right-color:red!important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
border-left-color:red!important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
border-top-color:red!important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
border-bottom-color:red!important;
}
In your HTML, add tool-tip-btn to your button’s class attribute, making it like this:
class="btn btn-outline-danger tool-tip-btn"
Then in your CSS, refer to that class:
.tool-tip-btn {
background-color: #ccc;
}
Its define in their OFFICIAL DOC Here
<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
tooltipClass="my-custom-class">
Tooltip with custom class
</button>
and in you TS
styles: [`
.my-custom-class .tooltip-inner {
background-color: darkgreen;
font-size: 125%;
}
.my-custom-class .arrow::before {
border-top-color: darkgreen;
}
`]
and the link for more info
You can write a class (e.x tool-info-class) and add on your tooltip
.tool-info-class .tooltip-inner {
background-color: #fff;
}
tooltipClass="tool-info-class"
An example https://stackblitz.com/edit/angular-yo7esv
Below has worked for me earlier
::ng-deep .tooltip-inner {
background-color:#707070!important
}
I want to simplify my code and I was wondering if there is a way to tell CSS to effect it's children elements according to what the parents attributes are.
(Maybe this statement is too broad, below you can see more specifically what I'm trying to accomplish)
#blueBtn {
background-color: #00f;
color: white;
border-color: #00f;
}
#blueBtn:disabled {
background-color: #33f;
color: gray;
border-color: #33f;
}
#greenBtn {
background-color: #0f0;
color: white;
border-color: #0f0;
}
#greenBtn:disabled {
background-color: #393;
color: #aaa;
border-color: #393;
}
I want a way to add 3 to each number that is 0 when the button is enabled. For example, if I had a redBtn it's colors would be #f00 and when disabled #f33.
That way I would only need one selector (button.disabled) to affect any color button.
effect it's children elements according to what the parents attributes are
That's just how CSS works (Cascading Style Sheets). But what you are trying to do is get the actual value. So no, not directly in the way you are thinking (as in have access to the computed value). There are a few ways around this but one solution is to take advantage of a variable. This wouldn't work with all property value pairs, but I think this scenario is a good fit. All I did was turn down the lightness for their hsl value:
.redBtn {
--color: 0;
background-color: hsl(var(--color), 100%, 50%);
}
.blueBtn {
--color: 255;
background-color: hsl(var(--color), 100%, 50%);
}
.greenBtn {
--color: 100;
background-color: hsl(var(--color), 100%, 50%);
}
[disabled] {
background-color: hsl(var(--color),100%, 30%);
color: #aaa;
}
button { width: 150px; height: 75px; color: white; }
button:active { border: 3px solid cornflowerblue; }
<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" >Blue Button</button>
<button class="greenBtn" >Green Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="redBtn" >Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" >Red Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="greenBtn" >Green Button</button>
<button class="blueBtn" >Blue Button</button>
Edit: Not sure how cross-browser compatible this is, as always, check IE :)
How can I use cursor: not-allowed on button or a? I tried the following:
.not-allowed {
pointer-events: auto! important;
cursor: not-allowed! important;
}
My button looks like this:
<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>
Without the pointer-events is activated, the cursor can not be changed. But if pointer-events: auto, the button or a is clickable. If the pointer-events: none the cursor doesn't change.
Please help me, I despair!
This is actually a bug in Bootstrap
The proposed solutions :
button:disabled {
cursor: not-allowed;
pointer-events: all !important;
}
or if you have this kind of structure :
<li class="disabled">
My Link
</li>
then
li.disabled {
cursor: not-allowed;
}
li.disabled a {
pointer-events: none;
}
Use this:
.not-allowed {
cursor: not-allowed !important;
}
You can wrap your button in span like below
<span>
<button> click me </button>
</span>
Now in css don't allow pointer events on button and make cursor disabled for wrapper.
button {
pointer-events: none;
opacity: 0.7
}
span {
cursor: not-allowed;
}
use onclick="return false;"
.not-allowed{
cursor: not-allowed! important;
}
<a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button">Test</a>
You have a number of options, but not all of them are equal.
Preferably, wrap your element with a div or span and set the cursor on the wrapper and pointer-events on the content. This way you get all benefits without messing with JS.
Second, you can use the attribute disabled on a button, which will make it so that it does not work. You can thenset the cursor on the disabled element.
Lastly, but I don't advise it, is using JS to return false. Even though this works, I don't like it because: the click event is still triggered (i.e. clicking is still possible but the link is not followed through), meaning you also visually think you clicked the button.
.disabled-wrapper {
display: inline-block;
cursor: not-allowed;
}
.disabled-wrapper a,
.disabled-wrapper button {
pointer-events: none;
}
button[disabled] {
cursor: not-allowed;
}
a.disabled.js-test,
button.disabled.js-test {
cursor: not-allowed;
}
<div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>
<button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>
<a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>
Most of the time not allowed is not work together with the disabled property.
is any one looking for disable with not allowed property here is code.
<style>
button
{
cursor:not-allowed;
}
</style>
<button disabled>
Click
</button>
What is the correct way to change the color of a button ?
My button :
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >
Theme color:
.theme-color {
background-color: #ee6e73;
}
.theme-color:hover {
background-color: #F18B8F;
}
the button loses the color after it has been clicked. What am i missing ?
It seems to be working fine. I'm guessing you made a small PEBKAC mistake somewhere. Might want to check your HTML and CSS real quick to see if there are no typos anywhere.
.theme-color {
background-color: #ee6e73;
}
.theme-color:hover {
background-color: #F18B8F;
}
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color">Click me!</button>
<button id="easy_mode" href="#gameZone" class="btn waves-effect waves-light spacing theme-color" >text</button>
.theme-color {
background-color: #ee6e73;
border:none;
cursor:pointer;
}
.theme-color:hover {
background-color: #ffffff;
border:none;
cursor:pointer;
}
Try these html and css codes
You can check here
https://jsfiddle.net/kyfycnn7/