Как написать такую кнопку (как на фото), чтобы по нажатии на кнопку, выезжало ещё 4 по очереди, (сверху, слева, снизу, справа), html css, помогите пож

Question

Кнопка, по нажатию которой, выезжает ещё 4 кнопки (справа, слева, сверху, снизу)

Answer 1

Это один из вариантов, где в качестве триггера выступает скрытый checkbox, а точнее его состояние (используем псевдокласс :checked).

.multibuttons {
  --shift: 106%;
  --shift-negative: calc(var(--shift) * -1);
  --shift-half: calc(var(--shift) / 2);
  position: relative;
  width: 120px;
  height: 80px;
  margin: 90px 130px;
}

.btn-toggle {
  z-index: 5;
}

.btn-toggle::before {
  content: 'OFF';
  color: #f00;
}

.multibuttons>div,
.multibuttons>.btn-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #999;
  border-radius: 5px;
  background: #ccc;
  cursor: pointer;
  transition: margin 0.3s ease-in-out;
}

.multibuttons div:nth-of-type(1) {
  transform: translateX(var(--shift-negative));
  margin-left: var(--shift-half);
}

.multibuttons div:nth-of-type(2) {
  transform: translateY(var(--shift-negative));
  margin-top: var(--shift-half);
}

.multibuttons div:nth-of-type(3) {
  transform: translateX(var(--shift));
  margin-right: var(--shift-half);
}

.multibuttons div:nth-of-type(4) {
  transform: translateY(var(--shift));
  margin-bottom: var(--shift-half);
}

#chbx {
  display: none;
}

#chbx:checked~div {
  margin: 0;
}

#chbx:checked+.btn-toggle::before {
  content: 'ON';
  color: #060;
}

<div class="multibuttons">
  <input type="checkbox" id="chbx">
  <label for="chbx" class="btn-toggle"></label>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

БЛОГ НА HUSL

Как написать такую кнопку (как на фото), чтобы по нажатии на кнопку, выезжало ещё 4 по очереди, (сверху, слева, снизу, справа), html css, помогите пож

Ответы (1 шт):