CSS change button style after click

L

9

67

I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.

Loralorain answered 9/2, 2017 at 10:52 Comment(2)

can you paste code here and little more explanation ? – Unprovided 9/2, 2017 at 10:54

You could add a jQuery function to add an extra class to the button on click – Inmost 9/2, 2017 at 10:59

C

95

If you're looking for a pure css option, try using the :focus pseudo class.

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}

Cuttler answered 9/2, 2017 at 10:56 Comment(0)

F

72

Each link has five different states: link, hover, active, focus and visited.

Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.

I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:

a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

A recommended order in your CSS to not cause any trouble is the following:

a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov): Force state in Chrome Developer Tools

Fancyfree answered 9/2, 2017 at 11:21 Comment(2)

In most cases using the anchor tags :visited state will be the cleanest css only implementation of a button with a clicked state. You could also repurpose a checkbox :checked jsfiddle.net/4hrzf39g/2 but its a bit much imo. – Caroylncarp 8/4, 2019 at 21:30

"focus follows active" is not ... very clear – Strident 17/2, 2021 at 0:24

S

16

It is possible to do with CSS only by selecting active and focus pseudo element of the button.

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

See codepen: http://codepen.io/fennefoss/pen/Bpqdqx

You could also write a simple jQuery click function which changes the background color.

HTML:

<button class="js-click">Click me!</button>

CSS:

button {
  background: none;
}

JavaScript:

  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG

Solace answered 9/2, 2017 at 11:2 Comment(0)

R

15

Try to check outline on button's focus:

button:focus {
    outline: blue auto 5px; 
}

If you have it, just set it to none.

Refutation answered 2/8, 2018 at 10:53 Comment(1)

This was the only solution that worked for me. The border property was not enough, it was outline that fixed the issue. – Stamina 8/2, 2019 at 22:7

I

8

What is the code of your button? If it's an a tag, then you could do this:

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}

<a href="#">A button</a>

Or you could use jQuery to add a class on click, as below:

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});

.button-clicked {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

Inmost answered 9/2, 2017 at 11:6 Comment(0)

B

4

If your button would be an <a> element, you could use the :visited selector.

You are limited however, you can only change:

color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties

I haven't read this article about revisiting the :visited but maybe some smarter people have found more ways to hack it.

Becerra answered 9/2, 2017 at 11:13 Comment(0)

B

2

An easy way of doing this is to use JavaScript like so:

element.addEventListener('click', (e => {
    e.preventDefault();

    element.style = '<insert CSS here as you would in a style attribute>';
}));

Brooklyn answered 17/12, 2020 at 16:13 Comment(0)

B

2

all answers is true for hover, focus,... if you want change background-color when you click and be stay that clicked state, you could do this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
  <script>
    const element = document.querySelector("body")
    let taskDone = false
   
    // function for show button
    const elementShow = () => {
      element.innerHTML = `
        <button id="done-button" style="background-color : ${!taskDone 
          ? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
          ${!taskDone ? "Done" : "not done yet"}
        </button>
        `
    }
    elementShow()

    // click Done button
    const doneTask = () => {
      taskDone = (taskDone ? false : true)
      elementShow()
    }
  </script>
</html>

Barkentine answered 29/9, 2022 at 10:4 Comment(0)

B

1

You can do it with :focus.

.button {
  border: 1px solid black;
}

.button:focus {
  border: 1px solid red;
}

Biped answered 25/2, 2023 at 22:43 Comment(0)

Recommended topics

Hot tags