maqskywalker
asked on
html button css styling
Hi experts,
I have this fiddle:
https://jsfiddle.net/7nczhsr3/
Everything in this fiddle works fine jut like I want it.
The buttons launch a div pertaining to each button..
My question is only on the css styles on my buttons.
So when you launch my html page at this fiddle you first see this. A page with three buttons.:
So if you click on button1 then div1 displays, if you click button 2 then div 2 displays, if you click button 3 then div 3 displays.
If you look at the css in my fiddle, I currently have the style set to this:
so the border color on the buttons is blue.
If you hover over a button then notice that the border color is this: border: 2px solid #0094ff;
I set the active button tag like this to red:
button:active {
border: 2px solid #ff0000;
}
But when I click on a button, the border is only red as long as I have my mouse button pressed, when I let go of the mouse press button the red button border color goes away.
I want this red style border: 2px solid #ff0000; to remain on the button after I pressed it and let go of my mouse button.
How do i fix my example so that the border color of whatever button I pressed stays red after i pressed it?
Anyone know what I'm doing wrong?
So then if I press button 1, I want the border style of my button to look like this:
So then if I press button 2, I want the border style of my button to look like this:
So then if I press button 2, I want the border style of my button to look like this:
I have this fiddle:
https://jsfiddle.net/7nczhsr3/
Everything in this fiddle works fine jut like I want it.
The buttons launch a div pertaining to each button..
My question is only on the css styles on my buttons.
So when you launch my html page at this fiddle you first see this. A page with three buttons.:
So if you click on button1 then div1 displays, if you click button 2 then div 2 displays, if you click button 3 then div 3 displays.
If you look at the css in my fiddle, I currently have the style set to this:
so the border color on the buttons is blue.
If you hover over a button then notice that the border color is this: border: 2px solid #0094ff;
I set the active button tag like this to red:
button:active {
border: 2px solid #ff0000;
}
But when I click on a button, the border is only red as long as I have my mouse button pressed, when I let go of the mouse press button the red button border color goes away.
I want this red style border: 2px solid #ff0000; to remain on the button after I pressed it and let go of my mouse button.
How do i fix my example so that the border color of whatever button I pressed stays red after i pressed it?
Anyone know what I'm doing wrong?
So then if I press button 1, I want the border style of my button to look like this:
So then if I press button 2, I want the border style of my button to look like this:
So then if I press button 2, I want the border style of my button to look like this:
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sheesh. The answer you accepted won't work and the assisted solution is the same as I posted.
Have I upset you somehow ??
Have I upset you somehow ??
ASKER
Chris,
My mistake. I looked at the solution on my phone and accidentally overlooked your posting.
I will re-ask another question similar to this question and give you the points if you comment on it.
My mistake. I looked at the solution on my phone and accidentally overlooked your posting.
I will re-ask another question similar to this question and give you the points if you comment on it.
What you need to do is add an 'active' class to the button as you click it and remove the active class from the others.
Change your CSS to include an active class, along with the pseudo class:
Open in new window
And then add the class to the clicked button, and remove the active class from the other:
Open in new window
Here's an updated fiddle: https://jsfiddle.net/7nczh
I've also change the border to your button to be 2px wide, so that it matches the :hover state - prevents the 'jump' that you were getting