#e8e8e8
1.switch { 2 position: relative; 3 display: inline-block; 4 width: 120px; 5 height: 34px; 6} 7 8.switch input { 9 display: none; 10} 11 12.slider { 13 position: absolute; 14 cursor: pointer; 15 top: 0; 16 left: 0; 17 right: 0; 18 bottom: 0; 19 background-color: #3C3C3C; 20 -webkit-transition: .4s; 21 transition: .4s; 22 border-radius: 34px; 23} 24 25.slider:before { 26 position: absolute; 27 content: ""; 28 height: 26px; 29 width: 26px; 30 left: 4px; 31 bottom: 4px; 32 background-color: white; 33 -webkit-transition: .4s; 34 transition: .4s; 35 border-radius: 50%; 36} 37 38input:checked + .slider { 39 background-color: #0E6EB8; 40} 41 42input:focus + .slider { 43 box-shadow: 0 0 1px #2196F3; 44} 45 46input:checked + .slider:before { 47 -webkit-transform: translateX(26px); 48 -ms-transform: translateX(26px); 49 transform: translateX(85px); 50} 51 52/*------ ADDED CSS ---------*/ 53.slider:after { 54 content: 'DISABLED'; 55 color: white; 56 display: block; 57 position: absolute; 58 transform: translate(-50%,-50%); 59 top: 50%; 60 left: 50%; 61 font-size: 10px; 62 font-family: Verdana, sans-serif; 63} 64 65input:checked + .slider:after { 66 content: 'ENABLED'; 67} 68 69/*--------- END --------*/
Comments
MIT License