<div> class="social-links d-flex justify-content-center mt-5">
<a href="https://github.com/Meenoow" target="_blank">
<i> class="fa-brands fa-github"></i>
</a>
</div>
                                                          
                                                        

                                                                                                                
.banner .social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 20px 20px;
    color: var(--bold-color);
    padding: 5px 5px 5px 5px;
    font-size: 50px;
    border-radius: 50%;
    transition: all 100ms ease-in-out; /* Changed transition property to "all" */
}

.banner .social-links a:hover {
    color: whitesmoke;
    background-color: var(--branding-color);
    border: solid 5px var(--secondary-color);
    padding: 5px 5px 5px 5px;
    transition: 0.70s;
    margin: 20px 20px;
    width: 80px;
    height: 80px;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: translate(-50%, -50%) rotate(-35deg) scale(1.5); /* Added translate(-50%, -50%) */
  -moz-transform: translate(-50%, -50%) rotate(-35deg) scale(1.5);
  -o-transform: translate(-50%, -50%) rotate(-35deg) scale(1.5);
  -ms-transform: translate(-50%, -50%) rotate(-35deg) scale(1.5);
  transform: translate(-50%, -50%) rotate(-35deg) scale(1.5);
  box-shadow: -8px 4px black;
}                                                               
                                                          
                                                        

                                                        
<a href="/work.html" target="_blank" class="btn btn-secondary">
View page
</a>   
                                                          
                                                        

                                                        
.btn-secondary {
    display: block;
    font-family: var(--heading-font-family);
    border-radius: 50px;
    padding: 8px 25px;
    font-size: 18px;
    line-height: 27px;
    color: whitesmoke;
    background: var(--branding-color);
    border: 2px solid transparent;
    transition: all 0.8s ease;
}

.btn-secondary:hover {
    color: var(--branding-color);
    border-color: var(--branding-color);
    background: linear-gradient(375deg, transparent, transparent);
}

.back-face .btn-secondary {
    display: block;
    font-family: var(--heading-font-family);
    border-radius: 50px;
    padding: 8px 25px;
    font-size: 18px;
    line-height: 27px;
    color: whitesmoke;
    background: var(--branding-color);
    border: 2px solid transparent;
    transition: all 0.8s ease;
}    
                                                          
                                                        

                                                        
<div> class="btn btn-small justify-content-center mb-5 d-none d-md-flex">
    <button> id="button_closed">
        <span>
            <a href="https://www.linkedin.com/in/ximenazcastillo/" target="_blank">
                <i>class="fa-brands fa-linkedin"></i>
            </a>
        </span>
    </button>
</div>    
                                                          
                                                        

                                                        
.btn-small {
    display: block;
}

#button_closed {
    height: 50px;
    width: 50px;
    background: var(--hilight-color);
    border: none;
    border-radius: 25px;
    color: black;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    outline: solid 5px black;
}

#button_closed i {
    padding: 5px 5px 5px 5px;
    font-size: 30px;
    color: black; 
}

#button_closed:hover span {
    display: none;
    outline: solid 8px black;
}

#button_closed:hover {
    width: 180px;
    transition: width .5s;
    background: black;
}

#button_closed:hover::after {
    color: var(--hilight-color);
    background: black;
    font-size: 23px;
    font-family: var(--heading-font-family);
    transition: 1.5s ease-in-out;
    content: "Lets connect!";
}    
                                                          
                                                        

                                                        
<div> class="email justify-content-center">
    <a href="mailto:xcastillo33@gmail.com" class="btn btn-email">
        <span> Email me!</span>
            <div> class="liquid"></div>
    </a>
</div>    
                                                          
                                                        

                                                        
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.email {
    margin-top: 10px;
    margin-left: 80px;
}
    
.email a {
    position: relative;
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    width: 200px;
    overflow: hidden;
    border-radius: 40px;
    font-family: var(--heading-font-family);
}
    
.email a span {
    position: relative;
    color: #fff;
    font-size: 20px;
    z-index: 1;
    font-family: var(--heading-font-family);
}
    
.email a .liquid {
    position: absolute;
    top: -70px;
    left: 0;
    width: 200px;
    height: 205px;
    background: var(--branding-color);
    transition: .4s;
}
    
.email a .liquid::after,
.email a .liquid::before {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: var(--bold2-color);
}
    
.email a .liquid::before {
    
    border-radius: 45%;
    background: #BE79B9;
    animation: animate 5s linear infinite;
}
    
.email a .liquid::after {
    
    border-radius: 40%;
    background: var(--bold2-color);
    animation: animate 10s linear infinite;
}
    
.email a:hover .liquid{
    top: -120px;
}

.email:hover a {
    border: solid 5px var(--hilight-color);
}
    
@keyframes animate {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
}