.main_box{width:1em;height:1em;position:relative;display:flex;justify-content:center;align-items:center;margin:auto}#share_button{display:none}.sharebtn,.link{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.sharebtn{width:1em;height:1em;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#eee;color:#333;font-size:2em;z-index:1;cursor:pointer;padding:1em}.sm_list{width:1em;height:1em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sm_list a{width:1em;height:1em;border-radius:50%;text-decoration:none;padding:1em;color:#fff;transition:all .3s;font-size:2em}#share_button:checked ~ .sm_list a:nth-child(1){background-color:#3B5998;transition-delay:0.2s;transform:translateX(-3em)}#share_button:checked ~ .sm_list a:nth-child(2){background-color:#dd2553;transition-delay:0.2s;transform:translateX(3em)}#share_button:checked ~ .sm_list a:nth-child(3){background-color:#000f94;transition-delay:0.3s;transform:translateX(5em)}#share_button:checked ~ .sm_list a:nth-child(4){background-color:#1077ec;transition-delay:0.3s;transform:translateX(-5em)}#share_button:checked ~ .sm_list a:nth-child(5){background-color:rgb(10,63,0);transition-delay:0.4s;transform:translateX(7em)}#share_button:checked ~ .sm_list a:nth-child(6){background:linear-gradient(70deg,blue,green,red,yellow);transition-delay:0.4s;transform:translateX(-7em)}#share_button:checked ~ .sm_list a:nth-child(1):hover{background-color:#ffffff;color:#3B5998}#share_button:checked ~ .sm_list a:nth-child(2):hover{color:#dd2553;background-color:#fff}#share_button:checked ~ .sm_list a:nth-child(3):hover{color:#000f94;background-color:#fff}#share_button:checked ~ .sm_list a:nth-child(4):hover{color:#1077ec;background-color:#fff}#share_button:checked ~ .sm_list a:nth-child(5):hover{color:rgb(10,63,0);background-color:#fff}#share_button:checked ~ .sm_list a:nth-child(6):hover{color:black;background-image:linear-gradient(90deg,white,grey)}.sharebtn:visited{background-color:#000f94}