How do I set a background color to my <button> when it's clicked using css?
.myBtn {
background-color: #fff;
cursor: pointer;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
html:
<button type="button" class="myBtn">Highlight me when Clicked</button>
Use the active selector for this. Here's a working FIDDLE.
.myBtn:active {
background-color: #dd4814;
}
Check this for reference.
EDIT: You can use the focus selector also
.myBtn:focus {
background-color: #dd4814;
}
But in this the color will change back again if the focus is lost from the button.
I guess you will need to take the help of Javascript or JQuery for changing the css rules on the click event of the button.
Sorry - but I don't have the rep to comment. But I think this may answer your question: Change background on button click, using CSS only?
EDIT: Oops. That looks like it changes the entire background - but you could probably still use it but change
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
to target the button by using the button class with something like this:
input[type="checkbox"]:checked + .mybtn{
background: #5BC0DE;
}
Edited answer:
<html>
<head>
<style>
.myBtn:active{
background-color: red;
}
.myBtn:visited{
background-color: red;
}
</style>
</head>
<body>
<button class ="myBtn">Click here to change bgcolor</button>
</body>
</html>
The following code is a snippet of SCSS.
:root {
--b1: beige;
--b2: brown;
--b3: #654321;
}
#check {
display: none;
}
.btn {
background-color: var(--b2);
padding: 5px;
border: 1px solid var(--b3);
font-family: Google Sans;
font-weight: 600;
color: var(--b1);
outline: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: darken(brown, 5);
border: 1px solid darken(#654321, 10);
}
