• HTML
• CSS

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<ul>
    <li>
        <a href="#">
            <i class="fas fa-gift"></i>
            <i class="fas fa-gift"></i>
        </a>
    </li>
    <li>
        <a href="#">
            <i class="fas fa-glass-martini"></i>
            <i class="fas fa-glass-martini"></i>
        </a>
    </li>
    <li>
        <a href="#">
            <i class="fas fa-globe"></i>
            <i class="fas fa-globe"></i>
        </a>
    </li>
        <li>
    <a href="#">
            <i class="fas fa-graduation-cap"></i>
            <i class="fas fa-graduation-cap"></i>
        </a>
    </li>
</ul>

CSS

body
{
    margin:0;
    padding:0;
}
ul
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:0;
    padding:0;
    display:flex;
}
ul li
{
    list-style:none;
}
ul li a
{
    position:relative;
    display:block;
    width:60px;
    height:60px;
    background:#262626;
    color:#fff;
    text-align:center;
    margin:0 10px;
    box-shadow:0 0 0 3px #262626;
    overflow:hidden;
}
ul li a i.fas
{
    position:relative;
    font-size:30px;
    width:100%;
    height:100%;
    line-height:60px;
    transition:0.5s;
}
ul li a:hover i.fas
{
    transform:translateY(-100%);
    color:#262626;
}
ul li a:before
{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform 0.5s;
}
ul li a:hover:before
{
    transform:scaleY(1);
}

/*
 All the credits: https://www.youtube.com/watch?v=G0aAo0_smi8
*/