socialBtn2.css

body {
    margin : 0;
    padding : 0;
    height: 100vh;
    display: flex;  /* 가운데로 오게 하기 위함. 것들 */
    justify-content: center;
    align-items: center;
}

.social-buttons a {
    display : inline-flex; /* 요소만큼 크기를 만들게 하고 inline이면서 flex.. */
    text-decoration: none; /* a 태그의 밑줄을 없앰.  */
    font-size: 18px;
    width: 60px;
    height: 60px;
    color : #fff;
    justify-content: center; /* 아이콘들을 가운데 오게함. */
    align-items: center;
    position: relative;
    margin : 0 8px;
}

.social-buttons a::before{
    content: "";
    position : absolute;
    width : 60px;
    height : 60px;
    background: linear-gradient(45deg, #22a6b3, #30336b);/* 점진적인 색.. 45도 기울은 채로 */ 
    border-radius: 50%; /* 둥글게 만듦 */
    z-index : -1; /* z인덱스 가 낮으면 뒤로감.  */
    transition: 0.3s ease-in; /*배경의 애니메이션 효과  */
}

.social-buttons a:hover::before { /* 마우스를 올렸을 때 크기를 0으로 만든다. */
    transform : scale(0);
}

.social-buttons a i { /* i의 애니메이션 효과. */
    transition: 0.3s ease-in;
}

.social-buttons a:hover i { /* a에 마우스를 올렸을 때 i의 css  */
    background:  linear-gradient(45deg, #22a6b3, #30336b);
    -webkit-background-clip: text; /* 글자에 배경을 넣는거인듯. */
    -webkit-text-fill-color : transparent; /* 투명하게..?  */
    transform: scale(2.2); /* 크기 조절. */
}