<p>
    <input type="radio" name="s1" id="s1On" value="1" hidden checked>
    <label for="s1On" class="switch switch--on">Yes</label>

    <input type="radio" name="s1" id="s1Off" value="0" hidden>
    <label for="s1Off" class="switch switch--off">No</label>
</p>

<p>
    <input type="radio" name="s2" id="s2On" value="1" hidden>
    <label for="s2On" class="switch switch--on">&#x2713;</label>

    <input type="radio" name="s2" id="s2Off" value="0" hidden checked>
    <label for="s2Off" class="switch switch--off">&#x2717;</label>
</p>
      
<p>
    <input type="radio" name="s3" id="s3On" value="1" hidden checked>
    <label for="s3On" class="switch switch--on">Sure</label>

    <input type="radio" name="s3" id="s3Off" value="0" hidden>
    <label for="s3Off" class="switch switch--off">I dunno</label>
</p>
html {
  background: #1b2026;
  font: 400 1em/1.5 "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  max-width: 20em;
  margin: 10em auto;
}

/** %[Object] Switch */
/*------------------------------------*/
.switch {
  color: #6f839a;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5em;
  border-radius: 3px;
  padding: .125em .5em;
  display: inline-block;
  background-color: #3e4956;
  transition: .15s ease;
}

input[type="radio"]:checked + .switch {
  color: #fff;
  padding-left: 1em;
  padding-right: 1em;
}

input[type="radio"]:checked + .switch--on {
  background-color: #7eab55;
}

input[type="radio"]:checked + .switch--off {
  background-color: #dd4a38;
}
/* More freebies on:
 * http://designitcodeit.com
 */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.