Hey, guys! Lately, I've been trying to make some changes in the appearance of a forum and so far with some CSS I've managed to create a cool-looking navigation bar. However, I need some help.
Here's my problem - so, in my script, I've got a normal button:

Code:


  #i_icon_mini_index{
  background-image: url(http://i35.servimg.com/u/f35/19/35/19/83/home-n12.png);
  width: 98px;
  height: 47px;
  }


Then, I have a change of the button's state when someone hovers on it with the mouse:

Code:


  #i_icon_mini_index:hover{
  background-image: url(http://i35.servimg.com/u/f35/19/35/19/83/home-a12.png);
  width: 98px;
  height: 47px;
  }


So far so good, however, I want to add another state where the button stays in red text with glow while it's active:

Code:


  #i_icon_mini_index:active{
  background-image: url(http://i35.servimg.com/u/f35/19/35/19/83/home-a12.png);
  width: 98px;
  height: 47px;
  }


What I wanted to do is to get the button to stay ACTIVE when the user clicks on it, and then after the user clicks on another button, the button before that returns to it's normal state and the other button that the user clicked on is active, kind of like the navigation bar on this forum, however the button doesn't stay active when I do that in my CSS, it only stays active when I drag the button (in Mozilla Firefox that is, I don't know for other browsers). What changes should I make in the CSS to achieve that!?

@JimChaotic these buttons are links so they will take a user to another page.

You know that a user will have to be really quick to click a navlink and click another one before they are redirected to the first one.