It is necessary to change the color of the button after pressing it, but the problem is that when it is pressed, the browser updates the page. Button in the form of a check-box, clicked, noted.

.login-btn1 { cursor: pointer; background: #33b5e5; width: 50%; position: relative; right: 3px; border: 0; padding: 10px 15px; color: #ffffff; -webkit-transition: 0.3s ease; transition: 0.3s ease; } 
 <button class="login-btn1" name="stack ">VK</button>

  • The default type of buttons is submit , and this is what updates the page. - Suvitruf ♦

2 answers 2

type = "button"

 <button type="button" class="login-btn1" name="stack ">VK</button>

how to get the color when you press the button

 function testFunction(element) { // without jQuery: var backgroundColor = window.getComputedStyle(element).backgroundColor; console.log(backgroundColor); // with jQuery: console.log($(element).css("background-color")); } 
 .login-btn1 { cursor: pointer; background: red; width: 50%; position: relative; right: 3px; border: 0; padding: 10px 15px; color: #ffffff; -webkit-transition: 0.3s ease; transition: 0.3s ease; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="login-btn1" name="stack " onclick="testFunction(this)">VK</button>

  • You can learn how to get the color when you click on the button? - Stranger
  .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; }