When you click on android devices, the color change of the button occurs only when held. It is necessary that when you press the color remained.

CSS

.login-btn2:active { background-color: red; -webkit-transition: 500s ease; transition: 0s ease; } .login-btn2 { cursor: pointer; background: #33b5e5; width: 50%; border: 0px; padding: 10px 15px; color: #ffffff; }

HTML

 <button type="button" class="login-btn2" name="wfphshr-vk ">INSTAGRAM</button>
  • one
    : focus in my opinion should handle this, or toggleClass jQuery - user33274

2 answers 2

1) You have an error in transition , it will be better to do this + 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) Or using 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) Or on native 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>

Example on native js jsfiddle

     .login-btn2:focus { background-color: red; -webkit-transition: 500s ease; transition: 0s ease; } .login-btn2 { cursor: pointer; background: #33b5e5; width: 50%; border: 0px; padding: 10px 15px; color: #ffffff; } 
     <button type="button" class="login-btn2" name="wfphshr-vk ">INSTAGRAM</button>