.main_boxs{
    /*width: 8em;
    height: 8em;*/
    position: relative;
}
  
#share_button{
    display: none;
}
  
.sharebtn, .aclass{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.sharebtn{
    width: 8em;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    transform: translate(-50%,-50%);
    z-index: 1;
    cursor: pointer;
}
  
.sm_list{
    width: 8em;
    height: 8em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    transform: translate(-50%,-50%);
}
  
.sm_list .aclass{
    width: 8em;
    height: 8em;
    text-decoration: none;
    transition: all .3s;
}

/* facebook */
#share_button:checked ~ .sm_list a:nth-child(1){
    transition-delay: 0.3s;
    transform: translateX(-6em);
}
  
#share_button:checked ~ .sm_list a:nth-child(4){
    transition-delay: 0.3s;
    transform: translateX(-12em);
}
  
/* linkedin */
#share_button:checked ~ .sm_list a:nth-child(3){
    transition-delay: 0.3s;
    transform: translateY(-6em);
}
  
#share_button:checked ~ .sm_list a:nth-child(2){
    transition-delay: 0.3s;
    transform: translateY(-12em);
}

/* Hovering Effects */
#share_button:checked ~ .sm_list a:nth-child(1):hover{
    background-color: #ffffff;
    color: #3B5998;
}
  
#share_button:checked ~ .sm_list a:nth-child(4):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(2):hover{
    color: #1077ec;
    background-color: #fff;
}

.sharebtn:visited{
    background-color: #000f94;
}

img[imgbutton]{
    width: 40%!important;
    height: 40%!important;
}