1

Необходимо изменение цвета кнопки, после её нажатия, но проблема в том, что при её нажатии браузер обновляет страницу. Кнопка в виде чек-бокса, нажал-отметил.

.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>

1
  • У кнопок по-умолчанию тип submit, вот оно и обновляет страницу. 7 мая 2018 в 18:28

2 ответа 2

1

type="button"

<button type="button" class="login-btn1" name="stack ">VK</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>

1
  • Можно узнать, как получить цвет при нажатии на кнопку?
    – Stranger
    7 мая 2018 в 18:35
0
  .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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.