1

Что необходимо сделать, чтобы при нажатии кнопки одновременно увеличивался и круг, и треугольник?

.btn-2 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border-radius: 15px;
}

.btn-2-triangle {
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid #ffffff;
  position: relative;
  top: 11px;
  left: 12.3px;
  right: 11.3px;
  bottom: 11.3px;
}

.btn-2:active {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}

.btn-2-triangle:active {
  height: 0px;
  width: 0px;
  border-top: 5.3px solid transparent;
  border-bottom: 5.3px solid transparent;
  border-left: 10.6px solid #ffffff;
  position: relative;
  top: 14.6px;
  left: 16.4px;
  right: 15px;
  bottom: 15px;
}
<div class="btn-2-1">
  <div class="btn-2">
    <div class="btn-2-triangle">
    </div>
  </div>
</div>

1
  • Код нужно как фрагмент вставлять
    – Alex78191
    31 мая 2017 в 19:10

2 ответа 2

2

Смените селектор:

.btn-2-triangle:active

Который значит "Нажатый треугольник" - смените на:

.btn-2:active .btn-2-triangle

Который значит "Треугольник внутри нажатой кнопки".

.btn-2 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border-radius: 15px;
}

.btn-2-triangle {
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid #ffffff;
  position: relative;
  top: 11px;
  left: 12.3px;
  right: 11.3px;
  bottom: 11.3px;
}

.btn-2:active {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}

.btn-2:active .btn-2-triangle {
  height: 0px;
  width: 0px;
  border-top: 5.3px solid transparent;
  border-bottom: 5.3px solid transparent;
  border-left: 10.6px solid #ffffff;
  position: relative;
  top: 14.6px;
  left: 16.4px;
  right: 15px;
  bottom: 15px;
}
<div class="btn-2-1">
  <div class="btn-2">
    <div class="btn-2-triangle">
    </div>
  </div>
</div>

1
  • Спасибо. Заработало 31 мая 2017 в 19:15
0

.btn-2 {
  height: 30px;
  width: 30px;
  background-color: #000000;
  border-radius: 15px;
}

.btn-2-triangle {
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid #ffffff;
  position: relative;
  top: 11px;
  left: 12.3px;
  right: 11.3px;
  bottom: 11.3px;
}

.btn-2:active {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}

.btn-2:active > .btn-2-triangle {
  height: 0px;
  width: 0px;
  border-top: 5.3px solid transparent;
  border-bottom: 5.3px solid transparent;
  border-left: 10.6px solid #ffffff;
  position: relative;
  top: 14.6px;
  left: 16.4px;
  right: 15px;
  bottom: 15px;
}
<div class="btn-2-1">
  <div class="btn-2">
    <div class="btn-2-triangle"></div>
  </div>
</div>

Ваш ответ

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

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