CODEWITHSUNDEEP
htmlcssbutton
Elliot
Elliot

Reputation: 83

CSS help: active button not changing style

I have a set of 3 buttons (although one is hidden), but when a button is active, i.e. has been clicked, its background colour does not change from #36A9E1 to #F9B233. The :hover state behaves fine; it's only the :active state that is being funny.

Strangely, when I open the webpage up using Inspect in Chrome, then click one of the buttons, it works fine. As soon as I click off the developer tools, it reverts to the default background colour.

Link: http://whatsondv.co.uk/prbok/clipperdesctabs.html.

What could be the issue?

.tablinksClipper{   
    background-color:#36A9E1;
    padding:0.5em;
    font-weight:700;
    color:#FFF;
    display:inline-block;
    margin-bottom:0.5em;
    font-family:Sintony, sans-serif;
    font-size:1em;
    line-height:1.25em;
    border:none;
    transition:0.3s;
}

.tablinksClipper:hover{
    background-color:#F9B233;
    cursor:pointer;
}

.tablinksClipper:active{
    background-color:#000000!important;
}
<div class="tab">
  <button class="tablinksClipper" onclick="openSectionClipper(event, 'infoClipper')" id="defaultClipper"><i class="fas fa-info-circle"></i> About</button>
  <button class="tablinksClipper" onclick="openSectionClipper(event, 'photosClipper')"><i class="fas fa-camera"></i> Photos</button>
  <button style="display:none;" class="tablinksClipper" onclick="openSectionClipper(event, 'dogsClipper')" id="dogTabClipper"><i class="fas fa-paw"></i></button>
</div>

Upvotes: 0

Views: 2487

Answers (2)

Sai Charan
Sai Charan

Reputation: 31

Instead of using :active on the button, add a class .active dynamically using jQuery.

$('.tablinksClipper ').on('click', function(){

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

and then you can use

.tablinksClipper .active {
       background-color:#F9B233 !important;
}

Upvotes: 1

seBaka28
seBaka28

Reputation: 960

The state active is only set for the duration of the click.

button:active {
background-color: red;
}
<button >Click me</button>

If you want the button to have a different look after you clicked it, you might have to add a class to it on click.

function clicked() {
    var element = document.getElementById("button");
    element.classList.add("clicked");
} 
button.clicked {
  background-color: red;
}
<button id="button" onClick=clicked()>Click me</button>

Upvotes: 2

Related Questions