1) У вас ошибка в transition
, лучше будет сделать так + focus
:
css
:
.login-btn2:focus {
background-color: red !important;
}
.login-btn2 {
cursor: pointer;
background: #33b5e5;
width: 50%;
border: 0px;
padding: 10px 15px;
color: #ffffff;
transition: 1s ease;
}
html
:
<button type="button" class="login-btn2" name="wfphshr-vk ">INSTAGRAM</button>
2) Либо же используя jQuery
:
js
:
$('.login-btn2').click(() => {
this.toggleClass('colored');
})
css
:
.colored {
background-color: red !important;
}
.login-btn2 {
cursor: pointer;
background: #33b5e5;
width: 50%;
border: 0px;
padding: 10px 15px;
color: #ffffff;
transition: 1s ease;
}
3) Либо на нативном js
:
js
:
document.getElementsByClassName("login-btn2")[0].addEventListener("click", (event) => {
const el = event.target;
el.classList.contains('colored') ? el.classList.remove('colored') : el.classList.add('colored');
}, false);
.colored {
background: red !important;
}
.login-btn2 {
cursor: pointer;
background: #33b5e5;
width: 50%;
border: 0px;
padding: 10px 15px;
color: #ffffff;
transition: 1s ease;
}
<button type="button" class="login-btn2" name="wfphshr-vk ">INSTAGRAM</button>
Пример на нативном js
JSFiddle