.iosCheck {/* Blue edition */}.iosCheck input {display: none;}.iosCheck i {display: inline-block;cursor: pointer;padding-right: 25px;transition: all ease 0.2s;-webkit-transition: all ease 0.2s;border-radius: 25px;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);}.iosCheck i:before {display: block;content: '';width: 25px;height: 25px;border-radius: 25px;background: white;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}.iosCheck :checked + i {padding-right: 0;padding-left: 25px;background: #00e970;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;}.iosCheck.blue :checked + i {background: #6cbff0;box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;}/* General styling */

<label class="iosCheck"><input type="checkbox" name="register_give_switch"/><i></i>
</label>

 /* clean gray ***  start *******************************************************************************/
.clean-gray {background-color: #eeeeee;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);background-image: -o-linear-gradient(top, #eeeeee, #cccccc);background-image: linear-gradient(top, #eeeeee, #cccccc);border: 1px solid #ccc;border-bottom: 1px solid #bbb;border-radius: 3px;color: #333;font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;padding: 1px 0;text-align: center;text-shadow: 0 1px 0 #eee;width: 150px;
}
.clean-gray:hover {background-color: #dddddd;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);background-image: linear-gradient(top, #dddddd, #bbbbbb);border: 1px solid #bbb;border-bottom: 1px solid #999;cursor: pointer;text-shadow: 0 1px 0 #ddd;
}
.clean-gray:active {border: 1px solid #aaa;border-bottom: 1px solid #888;-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.detail-btn {margin: 0 auto;padding: 0 10px;text-decoration: none;
}
.detail-btn:hover {text-decoration: none;
}
/* clean gray ***  end *******************************************************************************/

<span  class="clean-gray detail-btn sorry">取消</span>