In CSS I changed the border color and the text color of the bootstrap button-outline-danger and I am trying to change the color of the shadow, or what it is called when you click on it, and outline-button changes color and I don't know how to do it.
My CSS, which works
#delete {
color: #95ff0b;
border-color: #51dfe1;
background-image: none;
}
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
Each OS has its own text selection settings. It can be changed by ::selection pseudo-class, but when I set attribute color, attribute background becomes transparent automatically. How to avoid this?
Use this below css to change the background.
.lol {
color: green;
}
.lol::selection {
color: red;
background:#3297fd;
}
I've got a common button set in my css. Also 've got a hover set to it.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn is mostly on a black background, so the button is visible on hover state. But when .myBtn is on a white background, the button disappears because .myBtn hover color and the page background colour are the same.
My question is it possible to use .myBtn for all buttons create 2 different hover states?
e.g.:
.myBtn:hover1 {
background-color: #fff;
}
.myBtn:hover2 {
background-color: #000;
}
No, two hovers on one class won't work. Also when you declare two after each other, the stylesheet will be read cascade, so only the last will apply.
A possible solution would be to add an extra class.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn.onWhite:hover {
background-color: #000;
}
Then you'll only need to add an extra class on the buttons on a light background <button class="myBtn onWhite">.
It is not possible to create 2 hover effects for a same class. You can either use a different class and provide hover to that or use jQuery to provide that effect.
In what way do you change the background color? By hard coding your background-color? Or it's already written in two classes that when you trigger something, the html code will change the class name and thus the background?
If it's hard code I'm afraid you have to hard code the Btn class as well. But if it's triggered by something you can have another Btn class name and will be triggered together with background color.
i want that when i move my mouse on menu. it will change background colour as well as it will change text colour.
but my CSS only change background colour, it will not change text colour.
need help please.
a:hover
{
color: #231f20; //for text new colour (not worked)
background-color: #ffffff; //for background new colour (it worked)
}
I think I understand what you mean, the only reason why I don't think it worked was the way you tried to comment out the code, you were using // instead of /*.
Here's what I replaced it with:
a:hover
{
color: #231f20; /*for text new colour (not worked)*/
background-color: #088a68; /*for background new colour (it worked)*/
}
Small Example
<br>
Big Example
Live example: https://jsfiddle.net/yn16bxsv/
Hope this helped
I am trying to style my buttons in a way that the hover makes the button a lighter shade instead of a darker shade. I tried bootstrap customization page(http://getbootstrap.com/customize/) and it doesn't give me an option to change the button hover color. I tried doing this manually by inspecting the CSS but it is unclear how the buttons are getting the hover color. I tried another bootstrap customization website
http://pikock.github.io/bootstrap-magic/app/#!/editor
I wanted the main color to be #0495c9 and the hover color to be #00b3db but I am only able to specify the button bg color and not it's hover color.
Any help will be appreciated
The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you'll need to change:
/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
color: #fff;
background-color: #0495c9;
border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #00b3db;
border-color: #285e8e; /*set the color you want here*/
}
or can do this...
set all btn ( class name like : .btn- + $theme-colors: map-merge ) styles at one time :
#each $color, $value in $theme-colors {
.btn-#{$color} {
#include button-variant($value, $value,
// modify
$hover-background: lighten($value, 7.5%),
$hover-border: lighten($value, 10%),
$active-background: lighten($value, 10%),
$active-border: lighten($value, 12.5%)
// /modify
);
}
}
// code from "node_modules/bootstrap/scss/_buttons.scss"
should add into your customization scss file.
I had to add !important to get it to work. I also made my own class button-primary-override.
.button-primary-override:hover,
.button-primary-override:active,
.button-primary-override:focus,
.button-primary-override:visited{
background-color: #42A5F5 !important;
border-color: #42A5F5 !important;
background-image: none !important;
border: 0 !important;
}
This is the correct way to change btn color.
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
color: #fff;
background-color: #F7B432;
border-color: #F7B432;
}