I was able to successfully change the background-color (red) of a button and the color of its text (yellow), but for some reason it reverts to having a blue background and a white colored text.
This is my CSS code:
.btn-primary {
background-color: red;
color: #ffff00;
}
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:link {
background-color: red;
color: #ffff00;
}
.btn-primary:hover {
background-color: yellow;
color: #ffff00;
}
try adding !important at the end of your declarations, like this:
background-color: yellow
becomes
background-color: yellow !important
I have a link which should display white for 'regular' and hover, and light blue for active.
But it shows purple for 'regular'. Why?
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
text
HTML:
text
CSS:
<style>
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
</style>
If .button is an <A> tag as your CSS suggests you might want to provide styling for the "visited" pseudo class.
See: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited
Additional Information
The cascading nature of CSS means that the style's order does matter.
Once a URL has been visited, the ":visited" styles will apply.
When you hover over the link, those styles will apply as well.
The priority in which they apply will depend on the order they are in your style sheet.
Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}
In less I have the following:
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
&:hover{ color: white; }
}
&.black {
&:hover{ background: black; }
&:hover{ color: white; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
&:hover{ color: white; }
}
}
}
}
How do I avoid writing &:hover{ color: white; } multiple times?
Is there a way to apply this line to all of the immediate class descendants somewhere inside the a tag?
It depends on the desired result.
Do you want:
1) White hover color by default, regardless of whether it also has the one of the .orange, .black, or .topaz classes?
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
a:hover{ color: white; }
}
}
2) Or do you only want it to be white on hover if it also has one of .orange, .black, .topaz classes?
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
a:hover {
&.orange, &.black, &.topaz{
color: white;
}
}
}
}
You could do
a:hover {
&.orange,
&.black,
&.topaz { color: white; }
}
then define the background individually. This is assuming the hover for your anchor is different colour than white by default and you want the coloured classes to be white(not in a human race way!).
or use the same style as you have
a {
&.orange, &.black, &.topaz {
&:hover { color: white; }
}
}
if you have a common class for the colours then you could always target that common class
In this case I would recommend to simply remove &:hover { color: white; } rules, as long as you have it set on a tag already and there is no something like a:hover rules which might override this.
In case if you have some a:hover rule with different color, simply add &:hover { color: white } right inside of a block.
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
}
}
I had to use the !important property for a hover style to take effect. The code below would not work without me including the !important property. Why is that?
Non-working code
#sbw a.content_copy:link {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:visited {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:hover {
color: #ffffff;
background-color: #F12B63;
padding: 10px;
}
Working code
#sbw a.content_copy:link {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:visited {
color: #F12B63;
padding: 10px;
}
#sbw a.content_copy:hover {
color: #ffffff !important;
background-color: #F12B63;
padding: 10px;
}
The rules with :visited and :link may appear to be more specific.
You may do this :
#sbw a.content_copy:hover, #sbw a.content_copy:visited:hover, #sbw a.content_copy:link:hover {
color: #ffffff;
background-color: #F12B63;
padding: 10px;
}
color: #ffffff !important;
this only ensures that on Hover color #ffffff will always be applied.
for Example :-
p { color: red !important; }
p { color: blue; }
For the paragraph color will always be red, irrespective of second line CSS.
Why to use !important
Suppose you are writing css for your page in which you added a style p { color: red ;}
on the first line but later on you again added p { color: blue;} for same element, So
your first style will be gone and always second style will applied by browser.
So if you add !important with your style it enforce browser to stick with that only.