.social{display:flex;justify-content:flex-start;align-items:center;gap:5px}.social>ul{display:flex}.social>ul>li{list-style:none;border-radius:50%;position:relative;overflow:hidden}.social>ul>li>a{padding:1px 8px;text-decoration:none;color:#3f83f8;display:block;text-align:center;border-radius:50%;font-size:24px;position:relative;transition:.5s;font-weight:700}.social>ul>li:hover:before{right:0}.social>ul>li:hover>a{color:#fff}.social>ul>li:before{content:"";position:absolute;right:100%;top:0;width:100%;height:100%;transition:.5s}.social>ul>li:first-child:before{background-color:#3b5998}.social>ul>li:nth-child(2):before{background:linear-gradient(#495fc6,#a938a0,#e7495d,#f7c850)}.social>ul>li:nth-child(3):before{background-color:red}