.switch{display:inline-block;position:relative;width:40px;height:16px;border-radius:8px;background:rgba(0,0,0,.26);-webkit-transition:background .28s cubic-bezier(.4,0,.2,1);transition:background .28s cubic-bezier(.4,0,.2,1);vertical-align:middle;cursor:pointer}.switch::before{content:'';position:absolute;top:-4px;left:-4px;width:24px;height:24px;background:#fafafa;box-shadow:0 2px 8px rgba(0,0,0,.28);border-radius:50%;-webkit-transition:left .28s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1);transition:left .28s cubic-bezier(.4,0,.2,1),background .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.switch:active::before{box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(128,128,128,.1)}input:checked+.switch{background:rgba(0,150,136,.5)}input:checked+.switch::before{left:20px;background:#009688}input:checked+.switch:active::before{box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(0,150,136,.2)}