1<label class="rocker rocker-small">
2  <input type="checkbox">
3  <span class="switch-left">Yes</span>
4  <span class="switch-right">No</span>
5</label>          

  1/* Switch starts here */
  2.rocker {
  3  display: inline-block;
  4  position: relative;
  5  /*
  6  SIZE OF SWITCH
  7  ==============
  8  All sizes are in em - therefore
  9  changing the font-size here
 10  will change the size of the switch.
 11  See .rocker-small below as example.
 12  */
 13  font-size: 2em;
 14  font-weight: bold;
 15  text-align: center;
 16  text-transform: uppercase;
 17  color: #888;
 18  width: 7em;
 19  height: 4em;
 20  overflow: hidden;
 21  border-bottom: 0.5em solid #eee;
 22}
 23 
 24.rocker-small {
 25  font-size: 0.75em;
 26 /* Sizes the switch */
 27  margin: 1em;
 28}
 29 
 30.rocker::before {
 31  content: "";
 32  position: absolute;
 33  top: 0.5em;
 34  left: 0;
 35  right: 0;
 36  bottom: 0;
 37  background-color: #999;
 38  border: 0.5em solid #eee;
 39  border-bottom: 0;
 40}
 41 
 42.rocker input {
 43  opacity: 0;
 44  width: 0;
 45  height: 0;
 46}
 47 
 48.switch-left,
 49.switch-right {
 50  cursor: pointer;
 51  position: absolute;
 52  display: flex;
 53  align-items: center;
 54  justify-content: center;
 55  height: 2.5em;
 56  width: 3em;
 57  transition: 0.2s;
 58  user-select: none;
 59}
 60 
 61.switch-left {
 62  height: 2.4em;
 63  width: 2.75em;
 64  left: 0.85em;
 65  bottom: 0.4em;
 66  background-color: #ddd;
 67  transform: rotate(15deg) skewX(15deg);
 68}
 69 
 70.switch-right {
 71  right: 0.5em;
 72  bottom: 0;
 73  background-color: #bd5757;
 74  color: #fff;
 75}
 76 
 77.switch-left::before,
 78.switch-right::before {
 79  content: "";
 80  position: absolute;
 81  width: 0.4em;
 82  height: 2.45em;
 83  bottom: -0.45em;
 84  background-color: #ccc;
 85  transform: skewY(-65deg);
 86}
 87 
 88.switch-left::before {
 89  left: -0.4em;
 90}
 91 
 92.switch-right::before {
 93  right: -0.375em;
 94  background-color: transparent;
 95  transform: skewY(65deg);
 96}
 97 
 98input:checked + .switch-left {
 99  background-color: #0084d0;
100  color: #fff;
101  bottom: 0px;
102  left: 0.5em;
103  height: 2.5em;
104  width: 3em;
105  transform: rotate(0deg) skewX(0deg);
106}
107 
108input:checked + .switch-left::before {
109  background-color: transparent;
110  width: 3.0833em;
111}
112 
113input:checked + .switch-left + .switch-right {
114  background-color: #ddd;
115  color: #888;
116  bottom: 0.4em;
117  right: 0.8em;
118  height: 2.4em;
119  width: 2.75em;
120  transform: rotate(-15deg) skewX(-15deg);
121}
122 
123input:checked + .switch-left + .switch-right::before {
124  background-color: #ccc;
125}
126 
127/* Keyboard Users */
128input:focus + .switch-left {
129  color: #333;
130}
131 
132input:checked:focus + .switch-left {
133  color: #fff;
134}
135 
136input:focus + .switch-left + .switch-right {
137  color: #fff;
138}
139 
140input:checked:focus + .switch-left + .switch-right {
141  color: #333;
142}