CODEWITHSUNDEEP
htmlcssbutton
SH JONG
SH JONG

Reputation: 25

Add acctive state to buttons

I have a vertical navigation bar for web application control. The navigation bar is used to be a selective toolbar.

So, except for normal and hover states of a button, there must be an Active state while a button is being pressed.

The Active state should let the pressed button change to darker background-color until other button be pressed.

How can I do that? is it possible to be done in CSS? or need jQuery? I just tried li:active in CSS but doesn't work.

Below is the HTML:

<div class="navigation">
            <ul class="app_button" >
                <li><a href="XXX" class="app_button"><span>]</span>Function1</a></li>
                <li><a href="#" class="app_button"><span>]</span>Function2</a></li>
                  <ul class="sub_app_button">
                   <li><a  href="aaa">subfunction1</a></li>
                   <li><a  href="bbb">subfunction2</a></li>
                   <li><a  href="ccc">subfunction3</a></li>
                   <li><a  href="ddd">subfunction4</a></li>
                  </ul>
                <li><a href="#" class="app_button"><span>]</span>Function3</a></li>
                  <ul class="sub_app_button">
                   <li><a  href="eee" >subfunction5</a></li>
                   <li><a  href="fff" >subfunction6</a></li>
                  </ul>
            </ul> <!-- end:app_button -->
        </div> <!-- end:navigation -->

Below is the CSS:

div.inner_page div.navigation  ul.app_button li{
   left:0;
   display: block;
   margin:0px;
   padding: 0;
}

div.inner_page div.navigation  ul.app_button li a 
{
    font-size:16px;
    display: block;
    width: 100%;
    padding: 8px 0px 6px 0px;
    color: #ffffff;
    text-decoration: none;
    background: #aaa;
    border-bottom:none;
    border-top:none;
}
div.inner_page div.navigation  ul.app_button li a:hover 
{    

    width: 150px;
    color: #9be163;
    background: #333333;
    top: 0px;
    border-bottom:none;
    border-top:none;

}

Upvotes: 0

Views: 144

Answers (2)

prezes
prezes

Reputation: 129

In order to acieve that you would have to assure that upon page refresh, the button is given an actual class of 'active' or similar and then style it properly. As Kyle wrote, this would have to rely on your cms, not css alone.

Upvotes: 1

Kyle
Kyle

Reputation: 67204

You can use the :active pseudo selector:

div.inner_page div.navigation  ul.app_button li a:active
{    
    background: #111;/*whichever color you prefer*/
}

Now your button should have a darker background onClick :)

Upvotes: 2

Related Questions