Link to home
Start Free TrialLog in
Avatar of maqskywalker
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.:
User generated image
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:

User generated image
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:

User generated image
So then if I press button 2, I want the border style of my button to look like this:
User generated image
So then if I press button 2, I want the border style of my button to look like this:
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Dejan Vasiljevic
Dejan Vasiljevic

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Chris Stanyon
You're getting slightly confused between the pseudo 'active' class and having a .active class. The pseudo class, as you've discovered is only active whilst you're actually clicking 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:

button:active, button.active  {
   border: 2px solid #ff0000;
}

Open in new window


And then add the class to the clicked button, and remove the active class from the other:

 $('.active').removeClass('active');
 $(this).addClass('active');

Open in new window


Here's an updated fiddle: https://jsfiddle.net/7nczhsr3/9/

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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sheesh. The answer you accepted won't work and the assisted solution is the same as I posted.

Have I upset you somehow ??
Avatar of maqskywalker
maqskywalker

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.