Rotating Circle Social Media Icons
Feb 16, 2022
Live Preview
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);
}