.wrap { width:42px; height:20px; } input { display:none; } label { display:block; border:1px solid #888; height:20px; border-radius:15px; transition:.3s; } label .move { display:block; width:20px; height:20px; border-radius:50%; box-shadow:1px 1px 1px #ccc; background:#fff; transition:.3s; overflow:hidden; } input:checked+label { background:red; } input:checked+label .move { transform:translateX(20px); box-shadow:none; } .move span { width:40px; display:block; height:20px; line-height:20px; transition:0.3s; } input:checked+label .move span { transform:translateX(-20px); } em { text-align:center; width:50%; font-size:12px; font-style:normal; float:left; }