.ulclass{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;display:flex}.ulclass li{list-style:none}.ulclass li a{position:relative;width:60px;height:60px;display:block;text-align:center;margin:0 10px;border-radius:50%;padding:6px;box-sizing:border-box;text-decoration:none;box-shadow:0 10px 15px rgba(0,0,0,.3);background:linear-gradient(0deg,#ddd,#fff);transition:.5s}.ulclass li a:hover{box-shadow:0 2px 5px rgba(0,0,0,.3);text-decoration:none}.ulclass li a .fab{width:100%;height:100%;display:block;background:linear-gradient(0deg,#fff,#ddd);border-radius:50%;line-height:calc(60px - 12px);font-size:24px;color:#262626;transition:.5s}.ulclass li a .fa{width:100%;height:100%;display:block;background:linear-gradient(0deg,#fff,#ddd);border-radius:50%;line-height:calc(60px - 12px);font-size:24px;color:#262626;transition:.5s}.ulclass li:nth-child(1) a:hover .fab {color:#3b5998}.ulclass li:nth-child(2) a:hover .fa {color:#dd4b39}.ulclass li:nth-child(3) a:hover .fa {color:#34ab27}.ulclass span{position:absolute;top:60%;margin-top:10px;padding:.55rem 1rem;font-size:1rem;font-weight:500;white-space:nowrap;color:#000;border-radius:50px;background-color:#e3e0e0;box-shadow:0 15px 35px rgba(50,50,93,.1) , 0 5px 15px rgba(0,0,0,.07);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:all .2s ease-in-out}.ulclass a:hover span{top:100%;opacity:.9}.ulclass li:nth-child(1) a:hover span {color:#fff;background-color:#3b5998}.ulclass li:nth-child(2) a:hover span {color:#fff;background-color:#dd4b39}.ulclass li:nth-child(3) a:hover span {color:#fff;background-color:#34ab27}