radialCheckbox.css - using background-clip way

radialCheckbox.css

.checkbox {
    display: inline-block;
    cursor: pointer;
    background: transparent;
    background-clip: content-box !important;
    box-sizing: content-box;
    font-size: 22px; /* size of checkbox */
    width: 0.636em;
    height: 0.636em;
    padding: 0.182em; /* (width + padding * 2) = 22px */
    margin: 4px;
    border: 0.091em #fff solid; /* 2px */
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
}
.checkbox:hover {
    background: #fff;
    -webkit-animation: checkbox 1.33s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
            animation: checkbox 1.33s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}
.checkbox:active,
.checkbox.active {
    background: #fff;
}
.checkbox.active:hover {
    background: #fff;
    -webkit-animation: none !important;
            animation: none !important;
}

@-webkit-keyframes checkbox { /* Chrome, Safari, Opera */
    0%    { background: rgba(255,255,255, .15); }
    40%   { background: rgba(255,255,255, .55); }
    50%   { background: rgba(255,255,255, .55); }
    100%  { background: rgba(255,255,255, .15); }
}
@keyframes checkbox { /* Standard syntax */
    0%    { background: rgba(255,255,255, .15); }
    40%   { background: rgba(255,255,255, .55); }
    50%   { background: rgba(255,255,255, .55); }
    100%  { background: rgba(255,255,255, .15); }
}