Magic inspired Social Share Button https://codepen.io/codingstella/pen/gOQqaWo
https://codepen.io/codingstella/pen/gOQqaWo
Magic inspired Social Share Button
...
codepen.io
https://codepen.io/codingstella/
Coding Stella on CodePen
Amazing CSS Animation That You Have Never Seen 🤒
codepen.io
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-ae5cde2e-fb64-f510-42d5-4efea99ca66b" crossorigin=""></script>
<div class="menu">
<div class="toggle">
<ion-icon name="share-social"></ion-icon>
</div>
<li style="--i:0;--clr:#1877f2">
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
</li>
<li style="--i:1;--clr:#25d366">
<a href="#"><ion-icon name="logo-whatsapp"></ion-icon></a>
</li>
<li style="--i:2;--clr:#1da1f2">
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
</li>
<li style="--i:3;--clr:#FF5733">
<a href="#"><ion-icon name="logo-reddit"></ion-icon></a>
</li>
<li style="--i:4;--clr:#0a66c2">
<a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
</li>
<li style="--i:5;--clr:#c32aa3">
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
</li>
<li style="--i:6;--clr:#1b1e21">
<a href="#"><ion-icon name="logo-github"></ion-icon></a>
</li>
<li style="--i:7;--clr:#ff0000">
<a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
</li>
</div>*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background: #262433;
}
.menu{
position:relative;
width:280px;
height:280px;
display:flex;
align-items:center;
justify-content:center;
}
.menu .toggle{
position:relative;
height:60px;
width:60px;
background:#fff;
border-radius:50%;
box-shadow:0 3px 4px rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
color:#333;
font-size:2rem;
cursor:pointer;
transition:1.25s;
z-index:5;
}
.menu.active .toggle{
transform:rotate(360deg);
box-shadow: 0 6px 8px rgba(0,0,0,0.15),
0 0 0 2px #333,
0 0 0 8px #fff;
}
.menu li{
position:absolute;
left:0;
list-style:none;
transition:0.5s;
transform:rotate(calc(360deg/8 * var(--i)));
transform-origin:140px;
scale:0;
transition-delay: calc(0.05s * var(--i));
}
.menu.active li{
scale:1;
}
.menu li a{
position:relative;
display:flex;
transform:rotate(calc(360deg/-8 * var(--i)));
width:60px;
height:60px;
background-color:#FFF;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:1.75rem;
color:var(--clr);
box-shadow:0 3px 4px rgba(0,0,0,0.15);
transition:0.5s;
}
.menu li:hover a{
font-size:2.5rem;
box-shadow:0 0 0 2px var(--clr),
0 0 0 6px #fff;
}const menu=document.querySelector(".menu");
const toggle=document.querySelector(".toggle");
toggle.addEventListener("click",()=>{
menu.classList.toggle("active");
})
