Social Media Sharing Button UI Design 2 - Floating Social Media Icons Using HTML CSS And Javascript

Hôm nay mình giới thiệu cho các bạn 1 giao diện Floating Social Media Icons đơn giản, thướng áp dụng cho các thanh điều hướng hay social menu bằng CSS3.
<div id="social-container">
    <div id="toggle"></div>
    <ul id="social-content">
        <li>
            <a href=""><i class="demo-icon ecs-facebook"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-messenger"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-twitter"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-gplus"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-youtube-play"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-instagram"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-tumblr"></i></a>
        </li>
        <li>
            <a href=""><i class="demo-icon ecs-pinterest"></i></a>
        </li>
    </ul>
</div> 

#social-container {
    width: 50px;
    height: 50px;
    position: relative;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    #toggle {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #e91e63;
        -webkit-transform: scale(0.95);
            -ms-transform: scale(0.95);
                transform: scale(0.95);
        overflow: hidden;
        border-radius: 10px;
        z-index: 1;
        cursor: pointer;
        &:before {
            content: "\f1e0";
            font-family: "ecs";
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }
        &.active:before {
            content: "\e808";
        }
    }
    #social-content {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        li {
            border-radius: 10px;
            list-style: none;
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            background-color: #fff;
            -webkit-transition:.5s;
            -o-transition:.5s;
            transition:.5s;
            overflow: hidden;
            -webkit-transform: scale(0);
                -ms-transform: scale(0);
                    transform: scale(0);
            text-align: center;
            a {
                -webkit-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                line-height: 50px;
                font-size: 20px;
                -webkit-transition:.5s;
                -o-transition:.5s;
                transition:.5s;
                display: block;
                width: 100%;
                height: 100%;
            }

            &:hover {
                background: #2196f3;
                a {
                    color: #fff;
                }
            }
        }
        &.active {
            li {
                -webkit-transform: scale(0.95);
                    -ms-transform: scale(0.95);
                        transform: scale(0.95);
                &:nth-child(1) {
                    top:-100%;
                    left: -100%;
                    -webkit-transition-delay: 0s;
                         -o-transition-delay: 0s;
                            transition-delay: 0s;
                }
                &:nth-child(2) {
                    top:-100%;
                    left: 0%;
                    -webkit-transition-delay: 0.1s;
                         -o-transition-delay: 0.1s;
                            transition-delay: 0.1s;
                }
                &:nth-child(3) {
                    top:-100%;
                    left: 100%;
                    -webkit-transition-delay: 0.2s;
                         -o-transition-delay: 0.2s;
                            transition-delay: 0.2s;
                }
                &:nth-child(4) {
                    top:0%;
                    left: 100%;
                    -webkit-transition-delay: 0.3s;
                         -o-transition-delay: 0.3s;
                            transition-delay: 0.3s;
                }
                &:nth-child(5) {
                    top:100%;
                    left: 100%;
                    -webkit-transition-delay: 0.4s;
                         -o-transition-delay: 0.4s;
                            transition-delay: 0.4s;
                }
                &:nth-child(6) {
                    top:100%;
                    left: 0%;
                    -webkit-transition-delay: 0.5s;
                         -o-transition-delay: 0.5s;
                            transition-delay: 0.5s;
                }
                &:nth-child(7) {
                    top:100%;
                    left: -100%;
                    -webkit-transition-delay: 0.6s;
                         -o-transition-delay: 0.6s;
                            transition-delay: 0.6s;
                }
                &:nth-child(8) {
                    top:0%;
                    left: -100%;
                    -webkit-transition-delay: 0.7s;
                         -o-transition-delay: 0.7s;
                            transition-delay: 0.7s;
                }
            }
        }
    }
}

$(document).ready(function() {
    $("#toggle").click(function(event) {
        $("#toggle").toggleClass('active');
        $("#social-content").toggleClass('active');
    });
});

0 thảo luận về Social Media Sharing Button UI Design 2 - Floating Social Media Icons Using HTML CSS And Javascript

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục