Active Button Doesn't Work

Question

I want these buttons to be and stay active when clicked on but can't get it to work, and the "currentButton" to be active by default on page load. I am able to see the style for :active when I'm clicking on either button, but it doesn't stay active after clicking.

HTML for the 2 buttons:

<div class="w3-center invButtons">
    <button class="w3-button currentButton">Current</button>
    <button class="w3-button pastButton">Past</button>
</div>

CSS:

.w3-button{
    border: 2px solid #555555;
    background-color: white;
    color: black;
    padding: 4px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 130px;
    border-radius: 8px;
}

.invButtons {
    padding-bottom: 16px;
    margin: 30px 10px;
}

.w3-button:hover {
    color:#000!important;
    background-color: gray!important;
}

.w3-button:active {
    color:yellow!important;
    background-color: yellow!important;
}

Possible duplicate: https://stackoverflow.com/questions/15463854/pressed-button-css — smrubin, Jun 01 '17 at 20:48

score 1 · Accepted Answer · answered Jun 01 '17 at 21:00

The :active psuedo class is only applied while the button is being interacted with (i.e. "active"). Just like the :hover psuedo class is only applied while the mouse is hovering over the element.

If you want to apply a style to an element to signify it is the active/selected/in-use element out of a group, you need to add some sort of .active class to it after it is clicked and style that class.

And add that class to the button tag in the html that you want to start active.

Active Button Doesn't Work

1 Answers1