CSS Social Media Sharing Button UI Design With Cool Hover Effects - Pure CSS3 Social Media Widget UI

<div id="social-container">
    <a href="" style="background-color: #3b5999"><i class="demo-icon ecs-facebook"></i></a>
    <a href="" style="background-color: #dd4b39"><i class="demo-icon ecs-gplus"></i></a>
    <a href="" style="background-color: #cd201f"><i class="demo-icon ecs-youtube-play"></i></a>
</div>

#social-container {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    a {
        display: block;
        position: relative;
        -webkit-transition: 1s;
        transition: 1s;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #262626;
        margin: 0 2px;
        font-size: 18px;
        border-radius: 100%;
    }
    &:before {
        content: "\f1e0";
        font-family: "ecs";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #ff00ff, #8a2be2);
        z-index: 2;
        border-radius: 20px;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        color: #fff;
        margin: 0 2px;
        -webkit-transition: .5s;
        transition: .5s;
        left: 0;
    }
    &:hover {
        &:before {
            width: 40px;
        }
        a {
            &:nth-child(1) {
                -webkit-transform: translateX(44px) rotate(360deg);
                        transform: translateX(44px) rotate(360deg);
                -webkit-transition-delay: 0.4s;
                        transition-delay: 0.4s;
            }
            &:nth-child(2) {
                -webkit-transform: translateX(44px) rotate(360deg);
                        transform: translateX(44px) rotate(360deg);
                -webkit-transition-delay: 0.2s;
                        transition-delay: 0.2s;
            }
            &:nth-child(3) {
                -webkit-transform: translateX(44px) rotate(360deg);
                        transform: translateX(44px) rotate(360deg);
                -webkit-transition-delay: 0s;
                        transition-delay: 0s;
            }
        }
    }
}