.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: 5px; 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(#f0f0f0), to(#bfbfbf), color-stop(0.5, #ebebeb), color-stop(0.5, #dedede)); color: black; } .mblToggleButton.mblToggleButtonChecked { background-image: -webkit-gradient(linear, left top, left bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc)); 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(#8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999)); color: white; } .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected::after { border-color: white; } .mblToggleButton:disabled { cursor: default; border-color: grey; background-image: none; color: grey; }