Out of Stock Button

A toggle button to mark a product variation in or out of stock.

by wvega

HTML

<div><input id="checkbox-1" type="checkbox" /><label for="checkbox-1"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-2" type="checkbox" /><label for="checkbox-2"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-3" type="checkbox" /><label for="checkbox-3"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-4" type="checkbox" /><label for="checkbox-4"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-5" type="checkbox" /><label for="checkbox-5"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-6" type="checkbox" /><label for="checkbox-6"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-7" type="checkbox" /><label for="checkbox-7"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-8" type="checkbox" /><label for="checkbox-8"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>
<div><input id="checkbox-9" type="checkbox" /><label for="checkbox-9"><span class="off">Out of stock</span><span class="on">In stock</span></label></div>

CSS

div {
  display: inline-block;
  font-family: system-ui;
  font-size: 10px;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
label {
  background: #e8def7;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  position: relative;
}
label::before {
  background: #fcfbfe;
  border-radius: 2px;
  content: '';
  height: 6px;
  position: absolute;
  top: calc(100% - 4px - 6px);
  left: 4px;
  right: 4px;
}
label, label::before, label span {
  transition: all 0.2s ease-in-out;
}
label span {
  display: inline-block;
  padding: calc(4px + 6px + 2px) calc(4px);
  text-align: center;
  text-transform: uppercase;
  width: 40px;
}

label span.on {
  display: none;
}

input[type="checkbox"]:checked + label {
  background: #67b784;
}

input[type="checkbox"]:checked + label::before {
  background: #d3eadb;
  background: #e7f4ec;
  top: 4px;
}

input[type="checkbox"]:checked + label span {
  color: white;
}

input[type="checkbox"]:checked + label span.on {
  display: inline-block;
}

input[type="checkbox"]:checked + label span.off {
  display: none;
}