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, вот оно и обновляет страницу. Commented 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
    Commented 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;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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