logo DevAnswer - Developers Answer

Semicircular Animated Social Buttons

13th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
background: linear-gradient( 45deg, #d7e201, #ff01017a);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.wrapper {
width: 100%;
}

.wrapper .hamburger {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 50px auto;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.wrapper .cont {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #3BB878;
}

.wrapper .line {
    width: 75px;
    height: 10px;
    border-radius: 5px;
    background: #464646;
    margin: 10px auto;
    z-index: 2;
    position: relative;
    transition: all 0.4s linear 0.2s !important;
    top: 22px;
}

.wrapper .spin {
    animation: spin 0.5s ease-in-out;
}

.wrapper .unspin {
    animation: spin 0.5s ease-in-out;
    animation-direction: reverse;
}

.wrapper #bubble1, .wrapper #bubble2, .wrapper #bubble3, .wrapper #bubble4 {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    opacity: 1;
    position: absolute;
    left: 5px;
    transition: all 0.2s ease 0s;
    border-radius: 50%;
    line-height: 120px;
}

.wrapper #bubble1 {
    top: 16px;
}

.wrapper #bubble2 {
    top: 16px;
}

.wrapper #bubble3 {
    top: 16px;
}

.wrapper #bubble4 {
    top: 16px;
}

.out1, .out2, .out3, .out4 {
color: #fff !important;
transition: all 0.4s linear 0.1s !important;
}

.out1 {
left: 125px !important;
top: 40px !important;
background: #3B5998;
}

.out2 {
left: 55px !important;
top: 120px !important;
background: #55acee;
}

.out3 {
left: -45px !important;
top: 120px !important;
background: #dd4b39;
}

.out4 {
left: -115px !important;
top: 40px !important;
background: #4d4d4d;
line-height: 110px !important;
}

.cross1, .cross3 {
background: #fff !important;
}

.cross2 {
opacity: 0 !important;
}

.cross1 {
top: 42px !important;
transform: rotate(45deg);
}

.cross3 {
top: 2px !important;
transform: rotate(-45deg);
}

@keyframes spin {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="wrapper">
        <div id="hammy" class="hamburger">
                <div id="bubble1" class="bubble">
                        <a>
                                <i class="fa fa-facebook fa-4x"></i>
                        </a>
                </div>
                <div id="bubble2" class="bubble">
                        <a>
                                <i class="fa fa-twitter fa-4x"></i>
                        </a>
                </div>
                <div id="bubble3" class="bubble">
                        <a>
                                <i class="fa fa-google-plus fa-4x"></i>
                        </a>
                </div>
                <div id="bubble4" class="bubble">
                        <a>
                                <i class="fa fa-codepen fa-4x"></i>
                        </a>
                </div>
                <div id="cont" class="cont">
                        <div class="line" id="line1">
                        </div>
                        <div class="line" id="line2">
                        </div>
                        <div class="line" id="line3">
                        </div>
                </div>
        </div>
<div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
var hammy = $("#hammy");
var bub1 = $("#bubble1");
var bub2 = $("#bubble2");
var bub3 = $("#bubble3");
var bub4 = $("#bubble4");
var spun = false;
$('#cont').click(function () {
        if (spun == false) {
                spin();
        } else {
                unspin();
        }
});

$('#cont').focus(function () {
        if (spun == false) {
                spin();
        } else {
                unspin();
        }
});

var spin = function () {
        spun = true;
        $(hammy).removeClass("unspin").addClass("spin");
        bubblesout();
        makecross();
        setTimeout(function () {
                $(hammy).removeClass("spin");
        }, 500);

}
var unspin = function () {
        spun = false;
        $(hammy).removeClass("spin").addClass("unspin");
        bubblesin();
        destroycross();
        setTimeout(function () {
                $(hammy).removeClass("unspin");
        }, 500);
}

var bubblesout = function () {
        var i = 1;
        $(".bubble").each(function () {
                $(this).addClass("out" + i);
                i++;
        });
}
var bubblesin = function () {
        var i = 1;
        $(".bubble").each(function () {
                $(this).removeClass("out" + i);
                i++;
        });
}

var makecross = function () {
        var i = 1;
        $(".line").each(function () {
                $(this).addClass("cross" + i);
                i++;
        });
}
var destroycross = function () {
        var i = 1;
        $(".line").each(function () {
                $(this).removeClass("cross" + i);
                i++;
        })
}
</script>

</body>
</html>                        



Other Codes