.mblToggleButton { position: relative; cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0px 10px 0px 25px; height: 29px; border-width: 1px 1px 1px 1px; border-style: outset; border-color: #9CACC0; -webkit-border-radius: 3px; background-image: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#cecece), color-stop(0.5, #f8f8f8), color-stop(0.5, #eeeeee)); font-family: Helvetica; font-size: 13px; color: black; line-height: 29px; } .mblToggleButton.mblToggleButtonSelected { background-image: -webkit-gradient(linear, left top, left bottom, from(#ad7500), to(#ffaa00), color-stop(0.06, #ffb200), color-stop(0.5, #ffc700)); color: white; } .mblToggleButton.mblToggleButtonChecked { background-image: -webkit-gradient(linear, left top, left bottom, from(#00a200), to(#00d300), color-stop(0.2, #00ba00), color-stop(0.2, #00ba00)); color: white; } .mblToggleButton.mblToggleButtonChecked::after { position: absolute; content: ""; top: 6px; left: 7px; width: 5px; height: 10px; border-color: white; border-width: 2px; border-style: none solid solid none; -webkit-transform: rotate(45deg) skew(10deg); -webkit-transform-origin: 50% 50%; } .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected { background-image: -webkit-gradient(linear, left top, left bottom, from(#ad7500), to(#ffaa00), color-stop(0.06, #ffb200), color-stop(0.5, #ffc700)); color: white; } .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected::after { border-color: white; } .mblToggleButton:disabled { cursor: default; border-color: grey; background-image: none; color: grey; }