Social Bar
Follow
This is a minimalist social media bar that shows the title and full-colour icon on hover. The icons are spaced evenly and wrap around to a new line when there is not enough space.
Source Code
HTML
<ul class="sosh">
<li>
<a href="https://x.com/albinoblack">
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.573 21.573">
<path d="M16.99 1.0365h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.214-6.817-5.966 6.817H.42599998L8.156 11.7015-2e-8 1.0365H6.826l4.713 6.231zm-1.161 17.52h1.833L5.83 2.9125H3.863Z" fill="#000"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.573 21.573">
<path d="M16.99 1.0365h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.214-6.817-5.966 6.817H.42599998L8.156 11.7015-2e-8 1.0365H6.826l4.713 6.231zm-1.161 17.52h1.833L5.83 2.9125H3.863Z" fill="currentColor"/>
</svg>
</span>
<span>X</span>
</a>
</ul>
CSS
.sosh {
display: flex;
justify-content: space-evenly;
align-content: center;
flex-wrap: wrap;
gap: 1em 0;
overflow:hidden;
list-style-type:none;
margin:1em auto;
padding:0;
text-align:center;
}
.sosh li {
flex-grow: 1;
position: relative;
}
.sosh span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 4em;
width: 4em;
}
.sosh span:last-child {
width:auto;
height:auto;
position: absolute;
bottom: 0;
line-height:1.61;
opacity:0;
transition:opacity .4s;
}
.sosh a:hover span:last-child {opacity:1}
.sosh a {
padding: .5em 1em 1.5em 1em;
color:var(--header,#333);
text-decoration:none;
display: flex;
flex-direction: column;
align-items: center;
}
.sosh svg {position:absolute;top:0;left:0;}
.sosh a svg:first-child {opacity:0;transition:opacity .4s;}
.sosh a svg:last-child {opacity:1;transition:opacity .4s;}
.sosh a:hover svg:first-child {opacity:1;}
.sosh a:hover svg:last-child {opacity:0;}