CODEWITHSUNDEEP
htmlcss
Lilly
Lilly

Reputation: 15

Active Button Doesn't Work

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;
}

Upvotes: 0

Views: 1122

Answers (1)

sn3ll
sn3ll

Reputation: 1685

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.

Upvotes: 1

Related Questions