CSS change button style after click
CssButtonStylingCss Problem Overview
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
.
Css Solutions
Solution 1 - Css
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Solution 2 - Css
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
Solution 3 - Css
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
Solution 4 - Css
Try to check outline on button's focus:
button:focus {
outline: blue auto 5px;
}
If you have it, just set it to none
.
Solution 5 - Css
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>
Solution 6 - Css
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.
Solution 7 - Css
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>';
}));