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" );
})