CSS change button style after click
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Reset button style after 2nd click
You can use javascript on the onclick event to modify the button classList, please check the sample below
#button1 {
height:50px;
width:170px;
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
font-family: "Roboto", serif;
background-image: none;
box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
margin: 0 auto 0;
border-color: white;
color:white;
background-color:rgb(4, 30, 78);
border-radius: 30px;
}
#button1.active {
background-color: white;
color:rgb(4, 30, 78);
border-color:rgb(4, 30, 78);
cursor:pointer;
}
<button id="button1" onclick="this.classList.toggle('active')">Click Me</button>
How to style a clicked button in CSS
This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a>
tags))
button{ background-color:yellow;}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a { color: orange;}
a.button{ color:green; text-decoration: none;}
a:visited { color: purple;}
a:active { color: blue;}
<button>Hover and Click!</button><br><br>
<a href="#">Hello</a><br><br><a class="button" href="#">Bye</a>
Change the color of a button when clicked with javascript
You'll need to set up an event handler so that when any button gets clicked, all the buttons are reset so that no one of them is active. Then, set the clicked button to be active by styling it. But, instead of setting up multiple handlers, just set up one at the document
level that will receive any clicks via bubbling ("event delegation").
// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories-link");
// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
// Check to see if it was a button that was clicked
if(evt.target.classList.contains("button-categories-link")){
// Loop over all the buttons & remove the active class
buttons.forEach(function(button){
button.classList.remove("active");
});
// Make the clicked button have the active class
evt.target.classList.add("active");
}
});
.active { background-color:#ff0; }
<div class="button-categories">
<a href="#" class="button-categories-link">Candidates</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Contacts/Guests</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Jobs</a>
</div>
<div class="button-categories">
<a href="#" class="button-categories-link">Clients</a>
</div>
Change Bootstrap CSS for a button property after click
What you are missing is the :focus
pseudo element and focus
class, i.e.
.btn-primary:focus,
.btn-primary.focus, {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}
FYI, you have a few mistakes in your CSS: you are using ##EB984E
(i.e. double #
) in some rules instead of #EB984E
.
Also FYI a few notes on how to style buttons for usability and accessibility:
- you are using the same colour for hover - this should be a different colour to indicate that the button is active and ready to be clicked.
- You also use the same colour for the focus outline - this outline is used to show which button has focus when the site is being used with a keyboard. It is usually a different colour to highlight this, although as long as it's clear which has focus its ok.
Now, your code working the way you want (but I highly recommend you consider the above points for your live site) :)
.buttoncontainer {
padding: 20px;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
.btn:focus,
.btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem #EB984E;
}
.btn-primary {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 0.2rem #EB984E;
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem #EB984E;
}
.buttons input:focus {
outline: none;
}
</style>
<div class="buttoncontainer">
<button class="btn btn-primary">One </button>
<button class="btn btn-primary">Two</button>
<button class="btn btn-primary">Three</button>
</div>
Related Topics
Css3 Transition Animation on Load
Remove Blue Underline from Link
How to Make Button Look Like a Link
How to Add a Color Overlay to a Background Image
Same Font Except Its Weight Seems Different on Different Browsers
Css Hover Border Makes Inline Elements Adjust Slightly
How to Make Flexbox Children 100% Height of Their Parent
How to Target Only Ie (Any Version) Within a Stylesheet
Truncating Long Strings With Css: Feasible Yet
How to Vertically Center ≪Div≫ Inside the Parent Element With Css
Select Element Based on Multiple Classes
Which CSS Properties Are Inherited
Child With Max-Height: 100% Overflows Parent
How to Prevent CSS Inheritance