View CSS
View HTML
.s-box {
width: 30px;
height: 25px;
padding: 5px;
position: relative;
cursor: pointer;
transition: 300ms ease;
background:#0e4d92;
padding:20px
}
.socials a .icon {
height: 20px;
width: 20px;
}
.icon, .name {
text-align: center;
color: #fff;
margin-top: 0;
margin-bottom: 0;
}
.s-box .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
transition: 250ms ease;
}
.s-box .name {
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
opacity: 0;
transition: 250ms ease;
width: max-content;
font-size: 20px;
}
.s-box:hover {
width: 150px;
}
.s-box:hover:hover .icon {
opacity: 0;
top: 30%;
}
.s-box:hover:hover .name {
opacity: 1;
top: 50%;
}
/* IG Icon */
.gg-instagram {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
border: 2px solid transparent;
box-shadow: 0 0 0 2px;
border-radius: 4px;
width: 20px;
height: 20px
}
.gg-instagram::after,
.gg-instagram::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute
}
.gg-instagram::after {
border: 2px solid;
left: 3px;
width: 10px;
height: 10px;
border-radius: 100%;
top: 3px
}
.gg-instagram::before {
border-radius: 3px;
width: 2px;
height: 2px;
background: currentColor;
right: 1px;
top: 1px
}
<a>
<div class="s-box">
<i class="icon gg-instagram"></i>
<div class="name">Instagram</div>
</div>
</a>