Rotation Circle Social Media Icons

index.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <link rel="stylesheet" href="style.css" />

        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

        <title>Rotating Circle Hamburger Menu Example</title>
    </head>

    <body>
        <div class="menu">
            <div class="btn trigger">
                <span class="line"></span>
            </div>

            <div class="icons">
                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-instagram"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-facebook"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-google-plus"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-dribbble"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-linkedin"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-github"></i>
                    </div>
                </div>

                <div class="rotater">
                    <div class="btn btn-icon">
                        <i class="fab fa-behance"></i>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

        <script>
            $(document).ready(function () {
                $(".trigger").click(function () {
                    $(".menu").toggleClass("active");
                });
            });
        </script>
    </body>
</html>

style.css

body {
     height: 100%;
     overflow: hidden;
     background-color: #6e72fc;
     background-image: linear-gradient(315deg, #6e72fc 0%, #ad1deb 74%);
}
 .menu {
     width: 5em;
     height: 5em;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}
 .menu .btn {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
     opacity: 0;
     z-index: -10;
     cursor: pointer;
     transition: opacity 1s, z-index 0.3s, transform 1s;
     transform: translateX(0);
}
 .menu .trigger {
     opacity: 1;
     z-index: 100;
     cursor: pointer;
     transition: transform 0.3s;
}
 .menu .trigger:hover {
     transform: scale(1.2);
}
 .menu .line {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     width: 60%;
     height: 6px;
     background: #fff;
     border-radius: 6px;
     transition: background-color 0.3s, height 0.3s, top 0.3s;
}
 .menu .line:before, .menu .line:after {
     content: "";
     display: block;
     position: absolute;
     left: 0;
     width: 100%;
     height: 6px;
     background: #fff;
     border-radius: 6px;
     transition: background-color 0.3s, transform 0.3s;
}
 .menu .line:before {
     top: -12px;
     transform-origin: 15% 100%;
}
 .menu .line:after {
     top: 12px;
     transform-origin: 25% 30%;
}
 .icons .fab {
     font-size: 3em;
     color: #fff;
     transition: color 0.3s;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}
 .btn:hover {
     background-color: #fbb034;
     background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
     transition: all .4s ease;
}
 .menu .rotater {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform-origin: 50% 50%;
}
 .menu.active .btn-icon {
     opacity: 1;
     z-index: 50;
}
 .menu.active .trigger .line {
     height: 0px;
     top: 45%;
}
 .menu.active .trigger .line:before {
     transform: rotate(45deg);
     width: 110%;
}
 .menu.active .trigger .line:after {
     transform: rotate(-45deg);
     width: 110%;
}
 .rotater:nth-child(1) {
     transform: rotate(-22.5deg);
}
 .menu.active .rotater:nth-child(1) .btn-icon {
     transform: translateY(-10em) rotate(22.5deg);
}
 .rotater:nth-child(2) {
     transform: rotate(22.5deg);
}
 .menu.active .rotater:nth-child(2) .btn-icon {
     transform: translateY(-10em) rotate(-22.5deg);
}
 .rotater:nth-child(3) {
     transform: rotate(67.5deg);
}
 .menu.active .rotater:nth-child(3) .btn-icon {
     transform: translateY(-10em) rotate(-67.5deg);
}
 .rotater:nth-child(4) {
     transform: rotate(112.5deg);
}
 .menu.active .rotater:nth-child(4) .btn-icon {
     transform: translateY(-10em) rotate(-112.5deg);
}
 .rotater:nth-child(5) {
     transform: rotate(157.5deg);
}
 .menu.active .rotater:nth-child(5) .btn-icon {
     transform: translateY(-10em) rotate(-157.5deg);
}
 .rotater:nth-child(6) {
     transform: rotate(202.5deg);
}
 .menu.active .rotater:nth-child(6) .btn-icon {
     transform: translateY(-10em) rotate(-202.5deg);
}
 .rotater:nth-child(7) {
     transform: rotate(247.5deg);
}
 .menu.active .rotater:nth-child(7) .btn-icon {
     transform: translateY(-10em) rotate(-247.5deg);
}
 .rotater:nth-child(8) {
     transform: rotate(292.5deg);
}
 .menu.active .rotater:nth-child(8) .btn-icon {
     transform: translateY(-10em) rotate(-292.5deg);
}

Download

1.62 KB