xxxxxxxxxx
button{
background-color:yellow;
}
button:hover{
background-color:orange;
}
button:focus{
background-color:red;
}
xxxxxxxxxx
const btn = document.getElementById('btn');
let index = 0;
const colors = ['salmon', 'green', 'blue', 'purple'];
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = colors[index];
btn.style.color = 'white';
index = index >= colors.length - 1 ? 0 : index + 1;
});
xxxxxxxxxx
function btnRed() {
document.getElementById("Div1").style.backgroundColor="Red";
}
function btnGreen() {
document.getElementById("Div2").style.backgroundColor="Green";
}
function btnBlue() {
document.getElementById("Div3").style.backgroundColor="Blue";
}
function btnReset() {
document.getElementById("Div1").style.backgroundColor="Black";
document.getElementById("Div2").style.backgroundColor="white";
document.getElementById("Div3").style.backgroundColor="white";
}
EASY
xxxxxxxxxx
$('#kaufen').click(function() {
$(this).toggleClass('bg-crimson');
});
//css
.bg-crimson {
background-color: white;
color: #092348 !important;
}