tri state button

by Ravindra Athreya

HTML

<h1>Tri-state Toggle Button</h1>
<div class="container">
  <div class="radio-wrapper">
    <p class="correct"><i class="ion-checkmark-round"></i>
    </p>
    <p class="neutral-icon"><i class="ion-record"></i>
    </p>
    <p class="wrong"><i class="ion-close-round"></i></p>
    <input type="radio" name="event" class="yes" id="radio-yes" />
    <label id="on" for="radio-yes"></label>

    <input type="radio" name="event" class="neutral" checked id="radio-neutral" />
    <label id="inter" for="radio-neutral"></label>


    <input type="radio" name="event" class="no" id="radio-no" />
    <label id="off" for="radio-no"></label>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

body {
  
  background: -webkit-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #00c6ff 10%, #0072ff 90%); /* W3C */
        
}

h1 {
  color: white;
  font-size: 2em;
  text-align: center;
  font-family: 'Indie Flower', cursive;
}

.container {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-wrapper {
    width: 100px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    position: relative;
    margin-left: 1%;
    p {
        position: absolute;
        z-index: 10;
        color: orange;
        font-size: 1.7em;
        margin: 0;
        margin-top: 13px;
    }
    .correct {
        left: 17px;
        top: -5px;
    }
    .wrong {
        right: 17px;
        top: -5px;
    }
    .neutral-icon {
        left: 69px;
        top: -8px;
        opacity: .5;
    }
    label {
        z-index: 9;
    }
}

input[type="radio"] {
    display: none;
}

i { 
  z-index: 99;
  font-size: 18px;
}
.neutral-icon i {
  font-size: 10px;
}
.neutral + label {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 37%;
    transition: transform 1s;
}

.neutral:checked + label {
    border1: 2px solid rgba(0, 0, 0, 1);
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(238, 238, 238);
    background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238,...

JavaScript

$(document).ready(function(){
    $(":input").click(function(){
        console.log($(this).val());
    });
});