<label for="check-button" class="button">
Принят
</label>
<input id="check-button" type="checkbox" class="hidden">
<form method="GET">
<input name="state" type="submit" value="Подтверждён">
<br>
<input name="state" type="submit" value="Оплачен">
<br>
<input name="state" type="submit" value="Отправлен">
<br>
<input name="state" type="submit" value="Получен">
<br>
</form>
.button {
display: inline-block;
background-color: lightgray;
padding: 0.2em 0.5em;
border: solid 1px gray;
cursor: pointer;
}
.hidden {
display: none;
}
input[type="checkbox"] + form {
display: none;
}
input[type="checkbox"]:checked + form {
display: block;
}
input[type=submit] {
background: none;
border: none;
padding: 0.2em;
cursor: pointer;
}
input[type=submit]:hover {
background: #eee;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.