1 /* CSS Document 2 Modified original CSS source from: 3 http://codepen.io/mattbeaudry/pen/rwjIJ */ 4 5 .toggle-sm { 6 width: auto !important; 7 height: auto !important; 8 background: transparent !important; 9 overflow: visible !important; 10 } 11 12 .toggle-sm .button-wrap { 13 width: 50px; 14 cursor: pointer; 15 } 16 .toggle-sm .button-bg { 17 width: 100%; 18 height: 100%; 19 background-color: #ddd; 20 border-radius: 40px; 21 padding: 2px; 22 color:#fff; 23 transition:all 0.2s ease; 24 box-shadow: 0px 0px 7px 0px #9A4343; 25 } 26 .toggle-sm .button-switch { 27 /* OFF POSTION */ 28 position:relative; 29 left:0px; 30 width: 22px; 31 height: 22px; 32 /* border:solid 6px; */ 33 box-shadow: -1px 1px 4px 2px #6C3131 inset; 34 background-color: #ffbebe; 35 border-radius: 18px; 36 transition:all 0.2s ease; 37 } 38 .toggle-sm .button-active .button-switch { 39 /* ON POSTION */ 40 background-color: #fff; 41 left:25px; 42 box-shadow: 1px 1px 5px 3px #406440 inset; 43 } 44 .toggle-sm .button-in, 45 .toggle-sm .button-out { 46 position: absolute; 47 transition: opacity 0.6s ease; 48 padding-top: 7px; 49 line-height: 0.95em; 50 font-size: 0.85em; 51 text-transform: uppercase; 52 font-weight: bold; 53 } 54 .toggle-sm .button-in { 55 /* OFF > SHOW */ 56 opacity: 1.0; 57 color: #707070; 58 margin-left: 25px; 59 } 60 .toggle-sm .button-out { 61 /* ON > HIDE */ 62 opacity: 0; 63 margin-left: 6px; 64 } 65 .toggle-sm .button-active .button-out { 66 /* ON > SHOW */ 67 opacity: 1.0; 68 } 69 .toggle-sm .button-active .button-in { 70 /* OFF > HIDE */ 71 opacity: 0; 72 } 73 .toggle-sm .button-active .button-bg { 74 background-color: #22bb22; 75 box-shadow: 0px 0px 5px 2px #58F258; 76 }