<input type='checkbox' class='toggle' id='toggle'>
<label for='toggle'>
</label>

input.toggle {
  display: none;
}

label {
  display: inline-block;
  height: 1.5em;
  padding: 0 1em;
  text-align: center;
  font-weight: bold;
  border: 1px solid hsl(110, 50%, 40%);
  background-color: hsl(110, 50%, 80%);
  color: hsl(110, 50%, 20%);
  border-radius: 4px;
  box-shadow: 2px 2px 4px hsl(110, 50%, 80%);
} 

label::before {
  vertical-align: middle;
  content: 'Открыть';
}

input.toggle:checked + label::before {
  content: 'Закрыть';
}