<div>
    <label class="radio">
        <input type="radio" name="r" value="1" checked>
        <span>Radio #1</span>
    </label>
    <label class="radio">
        <input type="radio" name="r" value="2">
        <span>Radio #2</span>
    </label>
    <label class="radio">
        <input type="radio" name="r" value="3">
        <span>Radio #3</span>
    </label>
</div>

<!-- twitter -->
<a class="twitter" href="https://twitter.com/aaroniker_me" target="_blank">Twitter</a>

$radioSize: 22px;
$radioBorder: #D1D7E3;
$radioActive: #5D9BFB;

.radio {
    margin: 16px 0;
    display: block;
    cursor: pointer;
    input {
        display: none;
        & + span {
            line-height: $radioSize;
            height: $radioSize;
            padding-left: $radioSize;
            display: block;
            position: relative;
            &:not(:empty) {
                padding-left: $radioSize + 8;
            }
            &:before,
            &:after {
                content: '';
                width: $radioSize;
                height: $radioSize;
                display: block;
                border-radius: 50%;
                left: 0;
                top: 0;
                position: absolute;
            }
            &:before {
                background: $radioBorder;
                transition: background .2s ease, transform .4s cubic-bezier(.175, .885, .32, 2);
            }
            &:after {
                background: #fff;
                transform: scale(.78);
                transition: transform .6s cubic-bezier(.175, .885, .32, 1.4);
            }
        }
        &:checked + span {
            &:before {
                transform: scale(1.04);
                background: $radioActive;
            }
            &:after {
                transform: scale(.4);
                transition: transform .3s ease;
            }
        }
    }
    &:hover {
        input {
            & + span {
                &:before {
                    transform: scale(.92);
                }
                &:after {
                    transform: scale(.74);
                }
            }
            &:checked + span {
                &:after {
                    transform: scale(.4);
                }
            }
        }
    }
}

// Center & twitter
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    .twitter {
        position: fixed;
        display: block;
        right: 24px;
        bottom: 24px;
        opacity: .5;
        color: #212533;
        text-decoration: none;
        font-weight: 500;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}