as i click on the buttons one by one, both of them becomes green, somehow the code is not right as i try to use for two bottons. there should be a way to separate code for every button. i think what i do is not right, that is where i need help. thank you, frank
I have some work, I am a carer, after I come home, start doing this part too. I try to get a volunteer job, but I prefer to have some experience and a working system,website in html than its php template with database linked to. I’ve done php classes too. thank you, frank
I’m not seeing that happen in your demo here:
Please clarify what you are seeing or perhaps you are referring to some other demo?
You must be precise in what you ask otherwise we may end up talking about different things especially in a thread with over 100 posts 
Hi
I am sorry for being inaccurate. I am pasting the code part that I think is not good and trying to get the right one.
I try to apply own custom style on the button, where I could not make your code custom too, so this is the point I need help, otherwise all buttons I need to use will behave in the same way that I don’t like. I would like to make your code custom, according my custom button style, as I posted my button experiments previously. Unfortunately my code adaptation is not right. Thank you, frank
.btncolor2 {
background-color:darkgreen;
color:yellow;
}
.btncolor2:hover,
.btncolor2:focus{
background-color:green;
color:yellow;
}
.dropdwn2 {
background-color:lightblue;
}
.dropdwn2 > li a{
background-color:lightblue;
color:blue;
}
.dropdwn2 > li a:hover{
background-color:purple;
color:pink;
}
.btncolor2, .open > .dropdown-toggle.btn-default[aria-expanded=true],
.btncolor2, .dropdown > .dropdown-toggle.btn-default:focus{
background:darkgreen;
color:yellow;}
No clearer I’m afraid
The code above is doing what is expected of it.
The 2 buttons in your demo have different colors which seems to be what you want.
I just can’t fathom out what you see is the problem?
If you want all buttons to be darkgreen then simply give them all the btncolor2 class and they will all be alike.
If you want them all different colours then just use different class names for them (btncolor3, btncolor4 etc) and so on for each different button color that you want (although the classname should be more semantic than btncolor2 etc). Just use the same code you posted but with a different class and colors as desired.
Might this be a “Link - Visited - Hover - Active” order thing? That is, the problem isn’t about the initial colors of the buttons, but that a “state” rule isn’t being applied?
Hi
thank you for answer. the problem is very simple. it you click on th buttons one by one, you’ll see that the green one is green but clicking on red one will result also a green colour instead of read. if I would have a blue one, I am afraid that would be green too. I posted the modified version of your code that I am afraid is not the right one.
frank
my buttons works fine untill I click on them
If I understand correctly you want the button to remain red when clicked (i.e. its open state).
I already showed you the rule that affects the button but you are using it in two places without adding a special class to it.
This rule.
.btncolor1,
.open > .dropdown-toggle.btn-default[aria-expanded=true],
.btncolor1,
.dropdown > .dropdown-toggle.btn-default:focus{
background:red;
color:yellow;}
The above rule has these 2 rules inside.
.open > .dropdown-toggle.btn-default[aria-expanded=true],
.dropdown > .dropdown-toggle.btn-default:focus{
background:red;
color:yellow;
}
Those 2 rules will apply to all ‘open’ buttons unless you add your new class name to the button.
e.g. You would need this for btncolor1:
.open > .dropdown-toggle.btn-default.btncolor1[aria-expanded=true],
.dropdown > .dropdown-toggle.btn-default.btncolor1:focus{
background:red;
color:yellow;
}
thank you, that is right, just what i was looking for, thank you, frank.
by the way is there any documentation where i can learn about it? I tried youtube tutorials, no luck.
thank you.
It’s just CSS i’m afraid and will become clear with practice.
Maybe try taking one of the Sitepoint courses on CSS or one of the others around as they will start you with the basics and give you a foundation to build on.
1 Like
Hi
I would like to ask if I repeat the second row a bit modified: using hover instead of hover, is it correct or I am making mistake?
adding this code below the other two.
.dropdown > .dropdown-toggle.btn-default.btncolor1:hover{
background:red;
i noticed that hovering works after this one, otherwise i have to click away. also I noticed using backround, is there essential difference to background-color?thank you, frank
Background is shorthand for different background properties, like background-color.
Read more about it:
(Please, also note that a shorthand sets all not specified properties to their initial values!)
Did you mean to say that
You’re confusing me again:)
Maybe you meant :focus?
Don’t remove focus styles or keyboard users cannot navigate easily.
1 Like
i don’t remove anything, no way, i just added this code to the original one. this is my full version
.btncolor2:hover,
.btncolor2:focus{
background-color:green;
color:yellow;
}
.dropdwn2 {
background-color:lightblue;
}
.dropdwn2 > li a{
background-color:lightblue;
color:blue;
}
.dropdwn2 > li a:hover{
background-color:purple;
color:pink;
}
.open > .dropdown-toggle.btn-default.btncolor2[aria-expanded=true],
.dropdown > .dropdown-toggle.btn-default.btncolor2:focus{
background:darkgreen;
color:yellow;}
.dropdown > .dropdown-toggle.btn-default.btncolor2:hover{
background:green;
color:yellow;} thank you
this part is missing i am sorry
.btncolor2 {
background-color:darkgreen;
color:yellow;
}
i allways needed to click away from button, i gess because of … :focus. i tried to get a solution where without clicking enywhere … :hover works rightaway, on the custom buttons. this code under the original ones, looks ok but I want to doublecheck if it is correct also. I had things looking ok but they weren’t. so this is my attempt:
.dropdown > .dropdown-toggle.btn-default.btncolor2:hover{
background:green;
color:yellow;}
Focus is the state when the element has been clicked. It does not disappear (nor should it) until you click somewhere else or another element receives focus.
That’s the way it should work although you can set a different style for the focus you should not remove it and it must be different from the default state.
You have all the information available to you now so I suggest you play around and do some testing on your own because that’s the best way to learn.
1 Like
yes, I noticed the nature of the focus, to be honest I was a bit confused about how to use it properely. (from one side we have the hover, as we know it, from other side the focuse, that I experienced the bevioure you mentioned, and also, the active one also that tries to show us some sort of begining or default). so I return to the original code. thank you.
Some additional info:
The :active state is an old IE feature that was similar to the :focus state in decent browsers. In all other browsers the active state is an only temporary state during the time when the mouse key is down, then when the mouse key is released it fires the button (contrary to the enter key that fires directly).
There’s a rule of thumb in what order the different states should be applied to work as intended:
LoVe Foils HAte for the different states: link - visited - focus - hover - active.
For general styling the anchor itself should be used, because that will cover all links that are recognized by the browser.
2 Likes